why are my divs not stacking correctly? - html

Question

I am working on a site and for some reason, my Divs are acting very strangely.
link
Im not sure why this is happening.
HTML
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
CSS
/*Float press release images*/
#pressReleaseCenter{
width:960px;
margin: 0 auto;
/* background-color:green;*/
height:initial;
}
.pressImages{
/* background-color:yellow;*/
height:auto;
width:30%;
float:left;
height:91px;
}
.pressText{
/* background-color:orange;*/
text-align:left;
width:70%;
float:left;
height:91px;
bottom:0;
}
.hrBreak{
width:100%;
height:3px;
background-color:white;
position:relative;
}
#press1{
padding-top:10px;
}
Also, is there a better way to do this? Im considering using a table. Would that work in this situation? I want to continue with more information in the same format.

Answer 1

Don't use a table for layout. That is very much not the done thing any more. You haven't actually specified how it's supposed to look but it looks like you need to add clear: both; to .hrBreak in order to get the line to sit below your content as I imagine it should be doing.
See here as to why

Answer 2

SIMPLE SOLUTION:
This is a common problem when using float property for divisions. I had the same problem once.
Do the following code addition in both the HTML file and CSS file:
HTML:
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<!-- ADD THE BELOW LINE -->
<div class = "clear"></div>
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
Add the following code to CSS:
.clear{
clear: both;
}
Here is why that happens:
Link-1
Link-2
Hope it helps you.

Answer 3

Consider wrapping each press release in an element so that you can style the group of elements that make up a press release. You could wrap them in additional div tags, or ul li. You can then get rid of the extra <br> tags and the <div class="hrBreak"></div> entirely.
http://jsfiddle.net/h7GpT/ is an example that uses an unordered list.

Answer 4

I'm assuming that your main problem is with the hrBreak div overlapping with the first two DIVs.
Short version: Adding clear: left; to .hrBreak should give you a quick fix. This makes that DIV appear beneath any left-floated elements before it. clear: both; would also work, though some older browsers sometimes struggle with that particular option (so use clear: left; if that's all you need).
Long(er) version: When you use float, your element ceases to be a part of the regular document order - and unfloated elements that share the same space (in this case, anything within div#pressReleaseCenter) will operate separately.
If you have some content that follows after a floated element (or elements), you can most easily use the clear: left; or clear: right; CSS to ensure a clean divide between the content (or clear: both;, as mentioned before, with the caveat that a minority of browsers may struggle).
You shouldn't require the <br /> tag at all. In your example above. Use the clear on your hrBreak DIV and affect any desired spacing with margin or padding (for example, div.hrBreak { margin-top: 2em; } or whatever.
One thing to be aware of - if you have an unfloated DIV (or any other element) that contains floated elements, you may want to use overflow: auto; if you require that container to exhibit any styling of its own. For example, if you wanted div#pressReleaseCenter to have a border or background colour, using overflow: auto; will force it to acknowldege the proportions of its floated content. If you don't do this, you may find that your DIV only appears as large as its unfloated content (unless you've manually defined a width and height).