How do I make following divs appear under 2 column div layout

Question

Below, I want div A to act as a two column layout for it's inner divs with the other divs below it. However because the image is so tall the following divs end up next to it. How can I make divs B and C appear under the image?

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>

I would suggest that you put it all inside a `` with no borders instead of `
` — ClydeFrog, Jun 13 '12 at 07:31
I would, but unfortunately table's don't seem to work on this crazy legacy system I'm using, the table contents disappear. I have no idea why. — edwardmlyte, Jun 13 '12 at 07:39

score 1 · Accepted Answer · answered Jun 13 '12 at 07:33

Add "clear" after A1 and A2.

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
    <div style="clear:both"></div>
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:03

1

You want to make <div id="A"> contain its descendant elements, even though they’re floated.

This, for some reason, is referred to as a ”clearfix”, and there are a few different ways to do it:

There are a few other Stack Overflow questions on the subject too, e.g.

What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:03

Community

1
1

answered Jun 13 '12 at 07:37

Paul D. Waite

96,640
56
199
270

Thanks for the extra bits of reading material. Hadn't heard of this clearfix stuff. – edwardmlyte Jun 13 '12 at 07:46
You’re very welcome. It’s annoying there isn’t a specific CSS property yet to change this behaviour, but there we are. – Paul D. Waite Jun 13 '12 at 08:00

score 0 · Answer 3 · answered Jun 13 '12 at 07:38

0

This will do it:

#a2 { clear: right; }

answered Jun 13 '12 at 07:38

iddo

749
3
11

Dipak · Answer 4 · 2012-06-13T07:54:38.467

0

Demo: http://jsfiddle.net/MXLSn/

Add clearfix class to <div id='A' style='position:relative' class="clearfix">

Copy these classes in CSS file

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

You can use clearfix class to any container that has floated elements in it.

edited Jun 13 '12 at 07:54

answered Jun 13 '12 at 07:39

Dipak

11,930
1
30
31

How do I make following divs appear under 2 column div layout

4 Answers4