Geek Answers Handbook

Cleaning left but only so far

I have a set of divs and one image that I am trying to format to look like this:

Correct flow

At the first attempt, this is quite simple, I float the image and the name on the left, float the suffix on the right and it is clear: on the right; title.

HTML:

<div class='wrapper'> <img src='http://placehold.it/200x150?text=var+w%26h' class='image' /> <div class='name'></div> <div class='suffix'></div> <div class='title'></div> <div class='notes'></div> </div>

CSS

 .wrapper { border:1px solid black; overflow:auto; padding:5px; width:500px; } .image{ float:left; margin:0 5px 5px 0; } .name{ border:1px solid red; float:left; } .suffix{ border:1px solid blue; float:right; } .title{ border:1px solid green; clear:right; }

However, all my fields are variable and can be of different sizes, several lines, etc. Thus, clearing the right side of the header can clear one (or even zero) line suffix, but the name can be 3 lines:

Wrong flow

I can use the inner shell with overflow:hidden; or overflow:auto; on everything except the image, and then clear:both; the title, but then I lose the notes wrapping the image.

enter image description here

How can I maintain the correct flow in all parts?

Fiddle: http://jsfiddle.net/trex005/j6v1kmdp/

+4
source share
2 answers

Do not put div.notes in div.inner_wrapper :

 .wrapper { border:1px solid black; overflow:auto; padding:5px; width:500px; } .inner_wrapper{ overflow:hidden; } .image{ float:left; margin:0 5px 5px 0; } .name{ border:1px solid red; float:left; } .suffix{ border:1px solid blue; float:right; } .title{ border:1px solid green; clear:right; } .inner_wrapper .title{ clear:both; } 
 <div class='wrapper'> <img src='http://placehold.it/100x100?text=var+w%26h' class='image' /> <div class='inner_wrapper'> <div class='name'>name<br />is<br />multiline</div> <div class='suffix'>suffix</div> <div class='title'>title</div> </div> <div class='notes'>notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes</div> </div>
+1
source

There are other tools that can help you, such as a flexible box or absolute positioning. I think you can also achieve what you want with float, but if the semantic order of the elements is not critical, I would move suffix inside name , before the actual name in the markup, and use the following style:

 .wrapper { border: 1px solid; overflow: auto; padding: 5px; width: 500px; } .wrapper .image { float: left; margin-right: 5px; } .wrapper .suffix { float: right; } .wrapper .title { clear: right; }

http://jsfiddle.net/helmers/07hh2ft1/1/

0
source

More articles:


All Articles