[fishtankmedia]

Hi guys, i have been getting grief from this SIMPLE css I know it is something easy that I have overlooked. Anyone be able to give a quick look ? Would be much appreciated.


It's a really stripped down version of an in-progress layout....

If you look at the header on the page there is a double border... that is the bottom of the container div. Which should CONTAIN the text i.e. the border should be around the text!

Anyone any ideas? fix this and i'll give a helping hand if needed in the future. cheers dave.

http://www.fishtankmedia.com/research/contentPage.html

[seen.to]

Add <br clear="all" /> before your final </div>

So this:

</div>
</body>
</html>

Becomes this:

<br clear="all" />
</div>
</body>
</html>

[fishtankmedia]

I've never encountered this before and the ammount of layouts i've done with this design without getting funky errors.

Trying to google for info around your fix! any chance you could let me in on the reason why that works? Thank's again.

[cam]

actually, while seen.to's solution works, it's not the best way to do this as you're adding superflous markup

it's best to handle the situation in your css file - the following link both explains why this is necessary and how to do it.

http://www.positioniseverything.net/easyclearing.html

[fishtankmedia]

Cheers, that was a really good article.
-learn something every day!
Currently trying to enhance the layout above with a divider between the two sections.... using
#leftSection:{ border-right:1px ... }
works okay, but if the right section has more elements contained, than the left.... the border does not meet with the bottom.

Was considering implementing it with a positioned background image of a 1px line.... are there any better ways anyone knows of....


http://fishtankmedia.com/research/contentPage.html

[nakedintruder]

<2 pence>
I normally do;
<div class="clr">&nbsp;</div>

.clr{clear:both;height:0px;font-size:0px}
</2 pence>

[cam]

if you'd bothered to read the link i posted you'd see why that's not advisable.

sigh.

[nakedintruder]

Yeh, it looked good up until "Toggle Trouble", where he added an extra <p> tag and then added a clearing <div> anyway, so I'm a bit lost on it, I'll read it again next week.

<div class="guillotine-float">
<a href="#">Float Link</a><br>
The non-floated links to the left are wrapped in a paragraph, and that paragraph has the Holly hack value applied to it. 
Say "buh-bye" to the Guillotine Bug!
</div>

<p class="clearfix" style="margin: 0pt;">

<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
</p>

</div>

<div style="clear: both;"></div>

</div>