nischalinn Posted May 30, 2011 Report Share Posted May 30, 2011 Please refer to the image for this question.I want to create the design as shown in the image. but the problem appeared with the div box3. For div box3 I've set float:left. But it appears at the right margin of the div contents just below the div box2. To set the div box3 to the left position, just below the div box2, I had to set the margin-left to a very low negative value. This design creates problem with Aspx page. Quote Link to comment Share on other sites More sharing options...
ɹəuəllıʍ ʇɐb Posted May 31, 2011 Report Share Posted May 31, 2011 Without seeing the actual HTML code, it is very difficult to say why is what.Also, HTML rendering is very much browser-specific, so what you will see on say Firefox, may look very different on Internet Explorer.Finally, what kind of problem you encounter on the aspx page? Quote Link to comment Share on other sites More sharing options...
nischalinn Posted May 31, 2011 Author Report Share Posted May 31, 2011 in the aspx page, the div box3 is missing and the div box2 has gone at the bottom of the div content. Quote Link to comment Share on other sites More sharing options...
ɹəuəllıʍ ʇɐb Posted May 31, 2011 Report Share Posted May 31, 2011 Did you manually design the HTML code?What if you use some WYSIWYG software to design the page layout? Quote Link to comment Share on other sites More sharing options...
nischalinn Posted May 31, 2011 Author Report Share Posted May 31, 2011 I've used dream weaver for the coding.CSS code of the given image:#box1{width:205px;height:225px;float:left;margin-top:10px; }#contents{width:597px;height:350px;float:left;margin-top:10px;margin-left:8px; }#box2{width:205px;height:130px;float:right;margin-top:10px; } #box3{ width:205px;height:325px;float:left;margin-left:-816px;margin-top:265px; } Quote Link to comment Share on other sites More sharing options...
ɹəuəllıʍ ʇɐb Posted June 1, 2011 Report Share Posted June 1, 2011 I wonder if the 'contents' box needs a 'float:left' attribute? Quote Link to comment Share on other sites More sharing options...
ɹəuəllıʍ ʇɐb Posted June 1, 2011 Report Share Posted June 1, 2011 P.S. since you mention Dreamweaver, you may also want to try asking in one of the dedicated Dreamweaver forums http://forums.adobe.com/community/dreamweaver Quote Link to comment Share on other sites More sharing options...
varindia Posted February 16, 2012 Report Share Posted February 16, 2012 I've used dream weaver for the coding.CSS code of the given image: #box1{width:205px;height:225px;float:left;margin-top:10px;}#contents{width:597px;height:350px;float:left;margin-top:10px;margin-left:8px;} #box2{width:205px;height:130px;float:right;margin-top:10px;} #box3{ width:205px;height:325px;float:left;margin-left:-816px;margin-top:265px;} I think you are new to CSS. As par the image you have attached, you should make three column(divs)-left-sidebar, middle content and the right-sidebar, each with height auto, use float and clear both to make the three columns as par the image, then you can insert the two divs in left-sidebar and one in right-sidebar. Always give ""position:relative;" in CSS and use border to check whether there is overlap problem or not. Quote Link to comment Share on other sites More sharing options...
scb352 Posted May 6, 2012 Report Share Posted May 6, 2012 Create an outer div (width=total width)Create 3 DIV left, mid, right (width= ....., and float:left)Then place the contents(div s) in curresponding divs- left /mid/rightif again showing problms... give overflow:hodden to the 3 boxesThe error occured because of following reasonsmay be thw width of 3 main divs are greater than total width of outer divthats why the div came belowWhen giving padding/margin to divs, you must decrease the width/height of divHope you can fix this.... Good Luck Quote Link to comment Share on other sites More sharing options...
idragontech Posted June 29, 2013 Report Share Posted June 29, 2013 Please check my first step... <div id="wrapper"> <div id="header">Header</div> <div id="content-box1"><p>Box 1</p></div> <div id="content-box2"><p>Box 2</p></div> <div id="content-box3"><p>Box 3</p></div> <div id="content"> <div id="content-left"></div> <div id="content-main"></div> </div> <div id="footer"></div> <div id="bottom"></div> </div> Next second step CSS******************* body { font-family:arial,helvetica,sans-serif; font-size:12px; } #wrapper { width:900px; margin:0px auto; border:1px solid #bbb; padding:10px; } #header { border:1px solid #bbb; height:80px; padding:10px; } #content { margin-top:10px; padding-bottom:10px; } #content div { padding:10px; border:1px solid #bbb; float:left; } #content-left { width:180px; height:300px; } #content-main { margin-left:10px; width:666px; height:150px; } #content-box1, #content-box2, #content-box3 { padding:10px; border:1px solid #bbb; position:absolute; margin-top:190px; height:120px; } Quote Link to comment Share on other sites More sharing options...
Boris Posted July 15, 2013 Report Share Posted July 15, 2013 We use the "mobile first" design philosophy, first making the design for small screens and then ... He co-founded CodePen, an online playground for HTML, CSS, and JavaScript Using jQuery to add interactivity and solve complex problems. I use float-left. Besides not having any logical structure, this above appears to have been partially copied from :- http://css-tricks.com/lodge/ - for some unexplained reason Quote Link to comment Share on other sites More sharing options...
-pops- Posted July 15, 2013 Report Share Posted July 15, 2013 Boris, it's also been exhumed from 2011. Quote Link to comment Share on other sites More sharing options...
Boris Posted July 15, 2013 Report Share Posted July 15, 2013 Members wctumesh and wcttech plus neonight and audio all have the same IP addresses and very similar email addresses. I think it is some "clever" devil mucking us about, so I am going to take action. Quote Link to comment Share on other sites More sharing options...
harun20 Posted July 25, 2013 Report Share Posted July 25, 2013 Please flow it---------- HTML------------------ <body> <div id="container"> <div id="wrapper"> <div id="header">Header</div> <div id="content_left"><p>Box 1</p></div> <div id="content_right"><p>Box 2</p></div> </div> CSS--------------------------------- body { font-family:arial,helvetica,sans-serif; font-size:12px; } #wrapper { width:800px; margin:0px auto; border:1px solid #bbb; padding:15px; } #header { border:1px solid #bbb; height:150px; padding:10px; } #content_left{ margin-top:10px; padding-bottom:10px; } #content_right{ margin-top:10px; padding-bottom:10px; }You can try it. 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.