CODEWITHSUNDEEP
htmlcsshtml-table
Gunnar Bernstein
Gunnar Bernstein

Reputation: 6222

Table beside a floating element

I have a floating element on the right (size may vary). I want to display a table left of it using all available remaing space. Furthermore, the table columns need to be proportional, so I need table-layout:fixed.

(Since all solutions so far are workarounds, I would like to make my point more clear: The floating element does not have a fixed size. Therefore all solutions with margin-right, width:x % or witdh:x px will either leave screen areas unused or cut/overwrite the element.)

Is it possible?

http://jsfiddle.net/GunnarB/3ZYq8/

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

<select size="3">
<option>DB entries with unknown width</option>
<option>h--p://www.google.com</option>
<option>h--p://www.msn.com</option>
</select>    
<div id="wrapper">
<table>
        <tr>
            <td>left</td>
            <td>some text</td>
        </tr>
        <tr>
            <td>left</td>
            <td></td>
        </tr>
        <tr>
            <td>left</td>
            <td>NG</td>
        </tr>
    </table>
</div>

Upvotes: 0

Views: 144

Answers (4)

lurker
lurker

Reputation: 58244

Here's another approach using CSS only. The HTML is identical to the original, so I won't quote it again here. There are just a couple of changes to the CSS. The key here is to not float the container for the table, and apply overflow: hidden to its wrapper.

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    width: auto;
    overflow: hidden;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

You'd probably want to encapsulate the whole thing (select and table) in a div wrapper to give you control over how you want to use it in context in your page.

Upvotes: 0

budding_fed
budding_fed

Reputation: 71

Specify width to the #wrapper

#wrapper {
  background-color:gray;
  padding:5px;
  float:left;
  width: 50%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Upvotes: 0

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

you should do like this:

http://jsfiddle.net/ZppLh/

HTML 

<img src="whatever">
<div id="wrapper">
 <table>
  <tbody>
   <tr>
    <td>left</td>
    <td>some text</td>
   </tr>
   <tr>
    <td>left</td>
    <td></td>
   </tr>
   <tr>
    <td>left</td>
    <td>NG</td>
   </tr>
  </tbody>
 </table>
</div>

CSS 

img {
    float:right;
}
#wrapper {
    background-color:gray;
    right: 285px;
    position: absolute;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

Upvotes: 0

Subha
Subha

Reputation: 1051

You can specify width to the image and the div.

Update your CSS like this -

img {
    float:right;
    width: 40%;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
    width: 50%;
}

This should work!

Upvotes: 3

Related Questions