CODEWITHSUNDEEP
csshtml
Oswald3r
Oswald3r

Reputation:

HTML: split a parent div "fluidly"

I'm wondering how to make two child divs share a parent div.

I want the left column to contain text from a database (one word). This could be 1-10 letters long. Since I want the left columns width to fit the word perfectly, I don't give it a set width.

Then, I was trying to have the right column fill the remaining space.

Is there an easy way to do this?

I'm not sure what to set the right column's css to make this happen.

<div id="parent_div" style="width: 100px; height: 100px;">
     <div style="background-color:blue; float:left;" id="left_column">
           blue
     </div>
     <div style="background-color:red; float: left;" id="right_column">
           red
     </div>
</div>

I read you shouldn't have something floated without giving it a set width, but then it seems like what I want would be impossible.

Thanks

Upvotes: 1

Views: 603

Answers (2)

womp
womp

Reputation: 116977

I think you'll get the effect you want if you just don't float the second div.

<body>
<div id="parent_div" style="width: 100px; height: 100px;">
<div id="left_column" style="background-color: blue; float: left;"> blue </div>
<div id="right_column" style="background-color: red;"> red </div>
</div>
</body>

In firefox, this does exactly what you want. The red column takes up any remaining space not taken by the blue column.

Upvotes: 1

a_m0d
a_m0d

Reputation: 12195

Well, for a start, I would suggest that you make the right column float to the right - that should put it next to the left column. Not sure about the width of the left column though.

Upvotes: 0

Related Questions