cesarcesar Posted October 4, 2007 Share Posted October 4, 2007 In the code below you see i have a container div. Inside of that are two divs. I would like the two divs to align side-by-side and valign to the top of the container div. I can get them side-by-side, but not to valign both to top. What am i doing wrong? <div class="" style="width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px;"> <div class="" style="position:relative; z-index:7; width:300px;"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </div> <div class="" style="position:relative; z-index:6; width:200px; left:320px;"><IMG src='test.jpg' width='125'></div> </div> Quote Link to comment Share on other sites More sharing options...
Dat Posted October 9, 2007 Share Posted October 9, 2007 For one thing it is easier if you set the CSS like this: <html> <head> <style type="text/css"> .container { width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px; } .info { position:relative; z-index:7; width:300px; } .image { position: relative; float: left; z-index:6; width:200px; left:320px; } </style> </head> </html> <div class="container"> <div class="info"> Epsum factorial non... </div> <div class="image"><IMG src='test.jpg' width='125'></div> </div> Easier to read and understand. Explain again what you want because I think you are not very good at english but that's fine we aren't here to be criticized but clearly clarify what you want. So it is easier for us to help you with your needs. From my understanding... you want the text and image to align to the left within the container? Quote Link to comment Share on other sites More sharing options...
cesarcesar Posted November 14, 2007 Author Share Posted November 14, 2007 This solution for this problem can be found using either of the suggestions found here, http://www.webmaster-talk.com/css-forum/104721-div-inline-positioning.html#post470469 http://www.dhtmlgoodies.com/forum/viewtopic.php?p=9986#9986 Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted November 14, 2007 Share Posted November 14, 2007 Don't use the display:table suggestion. I don't think it is well supported yet. In the suggestion found here - http://www.webmaster-talk.com/css-forum/104721-div-inline-positioning.html#post470469, rather than clearing the floats with this .brclear{ clear:both; height:0; margin:0; font-size: 1px; line-height: 0; } Replace that with this css (and remove the <br class="clear" /> from your markup altogether) .container:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;} /*clears floats in IE6 only*/ * html .container {height:1%;} /*clears floats in IE7 only*/ *+html .container {min-height:1px;} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.