Some DIV is cutting another which is floating left

Question

I'm working with page template in WordPress (don't matter). I'll try insert a picture to express the point of my promlem.

LEFT-DIV is a child of CONTENT-DIV and has float:left. They both have the same background color. CONTENT-DIV can have another child NOTE-DIV in any place. It can be right from LEFT-DIV, it can be below. So I don't know its width for sure. Also, there can be a few of NOTE-DIVs inside CONTENT-DIV. The problem is that NOTE-DIV has another background color and cutting (overlaping) the LEFT-DIV.

Is that possible to avoid this?

My code looks like this:

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"></div>
    <p>...Content...</p>
    <div class="some-note" style="background:aqua;">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
</div>

Here is real example: http://jsbin.com/iqerug/4/edit#preview

can you post the html and css from this. describing it isn't enough you know. — Joseph, Mar 19 '12 at 22:01

Kaushtuv · Answer 1 · 2012-03-19T22:33:40.500

2

Add a background color to your left-div and make it as important

#left-div{
float:left;
width:200px;
height:700px;
min-height:700px;
margin-right:20px; 
background:#fff !important;   
}

you can see an example here: http://jsfiddle.net/pvrxG/5/

edited Mar 19 '12 at 22:33

answered Mar 19 '12 at 22:24

Kaushtuv

479
5
17

What if the LEFT-DIV has margin-right, and NOTE-DIV has border and border-radius? – user1063113 Mar 19 '12 at 22:45
I unserstand what you mean, you may find something here: http://stackoverflow.com/questions/343313/css-set-width-to-fill-of-remaining-area – Kaushtuv Mar 19 '12 at 23:07

score 1 · Answer 2 · answered Mar 19 '12 at 22:28

Your #left-div closes before the #note-div . Try this:

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;">
        <p>...Content...</p>
        <div class="some-note" style="background:aqua;">Text of note</div>
   </div>
   <p>...Content...</p>
   <p>...Content...</p>
   <p>...Content...</p>
</div>

If you want to add a note-div OUTSIDE of the left-div, make sure you clear the float first, as in

<div id="content" style="background:#FFF;">
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;">
        <p>...Content...</p>
        <div class="some-note" style="background:aqua;">Text of note</div>
   </div>
   <p>...Content...</p>
   <p>...Content...</p>
   <p>...Content...</p>
  <div class="some-note" style="background:aqua; clear:both">Text of new note</div>
</div>

In second case SOME-DIV will be always below – user1063113 Mar 19 '12 at 22:40 — user1063113, Mar 19 '12 at 22:40

score 1 · Accepted Answer · answered Mar 19 '12 at 22:50

Would something like this be good: http://jsbin.com/isawoz/3

<head>
  <style>
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
    #left-div{ float:left; width:150px; height:200px; margin:20px; border:1px solid black; }
    #content{ background:yellow; width:600px;height:500px;border:1px solid black;margin:10px; z-index:-1; }
    .some-note { background:aqua; /*float:left; */z-index:1; }
  </style>
</head><body>
  <div id="content">
    <div id="left-div"><img src="http://i.imgur.com/aSS3G.png" width="150px" height="200px" /></div>
    <p>...Content...</p>
    <div class="some-note">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>  
    <p>...Content...</p>
    <p>...Content...</p>
    <div class="some-note">Text of note</div>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
    <p>...Content...</p>
  </div>
</body>

If you need the text to overlap, use another combination of z-index.

This is not perfect solution, because, as I said, NOTE-DIV can have border and border-radius. But if there is nothing better, I will use your advice with z-indexes. — user1063113, Mar 19 '12 at 23:40

score 1 · Answer 4 · answered Mar 19 '12 at 23:32

You can set a max-width on "some note"; this would be straightforward with explicit pixel measurements like in your example or with percetnage-based widths should you implement them.

.some-note {
background:aqua;max-width:420px/*that's 600px parent - 150px left div - 20px margin*/;float:left;margin:10px 0;}

jsbin: http://jsbin.com/iqerug/6/edit#preview

Some DIV is cutting another which is floating left

4 Answers4