DIV width floating issue in CSS

Question

I have one issue with floating divs. I would like to set all divs to float:left and display all of them on the same row in the screen:

Example
A - div a "style=float:left"
B - div b "style=float:left"
C - div c "style=float:left"

As appeared on screen:

A  |  B  |   C


However, when contents in C is overflowing, it end up in the next row like this

A   |   B
C

May I know how to make div C back to the same row as div A and B regardless of how big is the content in C? I know that C is at the next row because the width is wider than the previous row can contain. How can we make div C appear as the same row with A and B regardless of how big the content in C? For my case, div C does not have a fixed width, and I dont intent to set the maximum width too. But A and B has the fixed width.

Thank you.

Why doesn't it have a fixed width? That would be the simplest way to fix it :) — Kyle
– Kyle, Commented Mar 2, 2011 at 8:28
Could you elaborate on why giving C a width is not an option? Maybe what you really need is a table? — lashleigh
– lashleigh, Commented Mar 2, 2011 at 8:30

salgiza · Accepted Answer · 2011-03-02 08:33:29Z

2

You can't do it just by using floats if C doesn't have a fixed with. However, you should be able to accomplish what you want by not setting float on C, and giving it a margin-left that equals the widths of A + B.

By giving C a left margin, it will appear to the right of A and B (as there's available space for it there) and, because you are not assigning it any width, it will occupy the remaining space. As a bonus, if C grows higher than A & B, it won't move content below the other boxes.

answered Mar 2, 2011 at 8:33

salgiza

5,9102 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2011-03-02 08:39:52Z

2

I think I'd use absolute positioning for this.

<html>
<head>
<style type="text/css">
div.outer { position: relative; width: 100%; }
div.inner { position: absolute; }
div.a { left: 0; }
div.b { left: 1em; }
div.c { left: 2em; }
}
</style>
</head>
<body>
<div class="outer">
<div class="inner a">A</div>
<div class="inner b">B</div>
<div class="inner c">C Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis lacinia elit sed sapien sollicitudin vitae laoreet lectus hendrerit. 
Donec id lorem mi, vitae feugiat purus. Phasellus cursus, est et sodales 
ornare, lorem magna convallis felis, ac pharetra sem nisl vitae massa. 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Morbi at lectus ac nulla vestibulum tincidunt 
quis vel neque. Pellentesque ultricies, ipsum nec congue placerat, tortor 
enim tempor risus, viverra rutrum eros arcu non orci. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec 
ligula neque, lacinia in sodales vitae, aliquet at diam. Ut sed semper 
ligula.</div>
</div>
</body>
</html>

...which produces output like this: Image of output

answered Mar 2, 2011 at 8:39

David

5,2243 gold badges46 silver badges67 bronze badges

1 Comment

vaso123 Over a year ago

This is a nice solution. But what if you want to do this more than one time, with dynamic height? Is that possible without jQuery?

melhosseiny · Accepted Answer · 2011-03-02 08:52:59Z

2

Remove the float: left declaration from div C and add a margin-left: (width of A + width of B) px declaration. See this fiddle for a demo.

answered Mar 2, 2011 at 8:52

melhosseiny

10.2k6 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

DIV width floating issue in CSS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related