CODEWITHSUNDEEP
htmlcss-float
Thomas Tempelmann
Thomas Tempelmann

Reputation: 12043

Sidebar using float conflicts with content using float+clear

I have a website that uses a sidebar on the right. That sidebar is using "float:right" as its CSS style.

I like to add content to the main that has text floating around images, as explanations. For those images, I use "float:right" as well, and it works as expected.

The challenge starts when I add several sections of text with images under each other, like this:

1st text   +-----+
text text  | img |
           +-----+

2nd text   +-----+
text text  | img |
           +-----+

By default, the 2nd paragraph would start right after the 1st one's end, like this:

1st text   +-----+
text text  | img |
2nd text   +-----+
text text
           +-----+
           | img |
           +-----+

I learned that I should use the style clear:right between the paragraphs to keep them separated, and that works as described.

Here's the code I'd use for each of the img+text blocks:

<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>

However, now the sidebar starts making trouble: If the sidebar is going down further than where the clear:right appears on the left side, then there will be a gap in the content, going as far as the sidebar goes. You can see the effect here: website example with sidebar influencing clear:right

Any suggestions how to deal with that, i.e. avoid that the clear:right doesn't get affected by the sidebar's height but only by the local text+image block?

One suggestion I found so far would be to avoid using float for the sidebar, but use a table instead. But that leads to new complications (e.g. the sidebar would end up on the left unless I change the order of my html content, which would then probably lead to new issues with smaller screens and whatnot).

Upvotes: 1

Views: 602

Answers (2)

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Enjoy the code.

HTML:

<div class="main">
    <div class="box-one">Your content here</div>
    <div class="box-two">Put photo here</div>
    <div class="clear"></div>

CSS:

.clear{
    clear:both;
}
.main{
    width:100%;
    background:#424242;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
}

.box-one{
    width:260px;
    background:#FFF;
    float:left;

}
.box-two{
    width:100px;
    background:#FFF;
    float:right;

}

Upvotes: 0

MassivePenguin
MassivePenguin

Reputation: 3711

Your content area and your sidebar need to be in separate div tags:

<body>
    <div>Header</div>
    <div>Content</div>
    <div>Sidebar</div>
</body>

Float the content left, and the sidebar right. You can then add as many elements inside each of those sections as you need. As long as the HTML is well-formed (i.e. not missing closing tags when needed) and they all stay within the width of their parent, they won't have a problem.

EDIT:

With a static sidebar and a fluid (elastic) main area, it gets a little more complex. First of all, remove the right-hand margin from #main, and add:

overflow-y: hidden;

Then, change the margin-right on your boxes div to:

margin: 0 2em;

That should sort the problem for you.

Upvotes: 1

Related Questions