Easy task at the first sight: list of headers followed by description, and the floated infobox at the center right of the every header. But I can't get infoboxes aligned exactly in front of each header. It's driving me nuts: setting equal margin-top for both h4 and .info doesn't work; deleting .it p declaration changes the positions of all infoboxes except the first one (why this declaration affects it??); the first row behaves differently from the next ones. How to make this work? I've shown borders for h4 and p elements to make things more clear. Here is the test HTML & CSS: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <style type="text/css"> .info { float: right; background-color: #fff095; color: #736925; font-size: 80%; /*margin-top: 20px;*/ } h4 { margin-top: 20px; border: 1px solid navy; } .it p { padding:0; margin:0; border:1px solid red; } </style> </head> <body> <div id="content"> <div class="it"> <div class="info">Info here</div> <h4>Sample title 1</h4> <p>Description here Description here Description here Description here Description here </p> <div class="info">Info here</div> <h4>Sample title 2</h4> <p>Description here Description here Description here Description here Description here </p> <div class="info">Info here</div> <h4>Sample title 3</h4> <p>Description here Description here Description here Description here Description here </p> </div> </div> </body> </html> HTML:
Like this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <style type="text/css"> .info { float: left; background-color: #fff095; color: #736925; font-size: 80%; /*margin-top: 20px;*/ } h4 { margin:0; border: 1px solid navy; float:left; } .it p { padding:0; margin:0; border:1px solid red; width:100%; float:left; } .it { margin-bottom:20px; float:left; width:100%; } </style> </head> <body> <div id="content"> <div class="it"> <h4>Sample title 1</h4> <div class="info">Info here</div> <p>Description here Description here Description here Description here Description here </p> </div> <div class="it"> <h4>Sample title 2</h4> <div class="info">Info here</div> <p>Description here Description here Description here Description here Description here </p> </div> <div class="it"> <h4>Sample title 3</h4> <div class="info">Info here</div> <p>Description here Description here Description here Description here Description here </p> </div> </div> </body> </html> HTML:
Thank you, it works. I've changed the float of .info to the "right" (I need it to be aligned to the right edge) and your code works as I needed. I am still curious why my code doesn't work as expected, and why almost empty ".it p" css declaration affects rendering logic. Anyone able to explain?
Well it simply comes down to the default behavior of the tags you used, and where you place them. Since in your original code you placed the .info block AFTER the paragraph, ofcourse it will render it along that line, after the paragraph. Had you placed it above, or inside the title tag, where you want it, it will render as intended. Because the p tag is 100% width by default, so everything below it will stay below it, including floats. Based on that, you could of used this code as well: <div class="it"> <h4>Sample title 1<div class="info">Info here</div></h4> <p>Description here Description here Description here Description here Description here </p> <h4>Sample title 2<div class="info">Info here</div></h4> <p>Description here Description here Description here Description here Description here </p> <h4>Sample title 3<div class="info">Info here</div></h4> <p>Description here Description here Description here Description here Description here </p> </div> HTML: This is using the exactly same CSS code from your original post. P.S. You can get the answer to your question and learn how this process works by experimenting with the positioning of the .info block. Try placing it in different locations and you will see the result first hand.