Help - Search - Members - Calendar
Full Version: Border doesn't wrap around text.
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Shevan
Hi, this is my first post on here, so bear with me.

Ok, I'm working on a website, and I've run into a problem.

Essentially I want a border around two columns of text. But the border only wraps itself around whatever text is in the left column, so if there is more text in the right column than the left, there is text outside the border.

I made an image to explain a little better: goo.gl/XE70k

HTML:

CODE

<link rel="stylesheet" href="border.css" TYPE="text/css" MEDIA=screen>

<div id="border">

<div id="rightside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="leftside">
<p>Lorem ipsum dolor sit amet.</p>
</div>

</div>


CSS:

CODE

#border {
border: 1px solid blue;
width: 500px;
}

#rightside {
width: 200px;
float: right;
}

#leftside {
width: 200px;

}


Can anyone help me out?



Darin McGrew
When you float div#rightside you remove it from the normal content flow. As far as div#border is concerned, div#rightside doesn't exist.

Here's an article that discusses the issue and offers suggestions:
http://complexspiral.com/publications/containing-floats/
Shevan
QUOTE(Darin McGrew @ Dec 30 2011, 05:28 PM) *

When you float div#rightside you remove it from the normal content flow. As far as div#border is concerned, div#rightside doesn't exist.

Here's an article that discusses the issue and offers suggestions:
http://complexspiral.com/publications/containing-floats/


Okay..... thanks.

I read that article and I sort of understand it... but I still don't really get what I should do.....
Frederiek
In such cases, I often use the Micro clearfix hack ( see http://nicolasgallagher.com/micro-clearfix-hack/ ) :

CODE
/* Start of "Micro clearfix" */
    .cf { zoom: 1; }
    .cf:before,
    .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }
    
    /* For IE 6/7 (trigger hasLayout) */
    .cf {
        zoom:1;
    }
/* End of "Micro clearfix" */

Add that to your CSS and add a class="cf" to your #border div:
<div id="border" class="cf"> ... </div>

Et voilą.
pandy
Meyer's first solution is the easiest to understand and maybe still the most common. You have a whole bunch of methods here.
http://css-discuss.incutio.com/wiki/Clearing_Space

The option with the clearer element is also the easiest to explain and understand. When you add an box with, say, clear: left after the floated boxes in the HTML it goes to the first spot that isn't affected by any left float. Since the clearer box is the normal flow the containing DIV "sees" it and is forced to contain it - and with it the floats.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.