nyuille Posted September 20, 2016 Share Posted September 20, 2016 Hello I have following document flow: <h3> ... </h3> <p> ....</p> <div1> <div2>...</div2> <div1> <h2>...</h2> Here is my problem. I am just learning about positioning and as I understand it, you should you let parents be relative and child be absolute if needed so website renders smoothly in all browsers. I made div2 elements absolute, but div1 as relative. I thought this would allow for natural document flow as planned above. However, what's happening is that h2 is appearing above div1. Can anyone help me so that h2 appears below div1? Thanks, Natalie <h3> Link to comment Share on other sites More sharing options...
Ingolme Posted September 20, 2016 Share Posted September 20, 2016 Don't use positioning for layout. When you use absolute positioning, the element is no longer taken into account when calculating the height of the document. div1 has no height at all if the only thing inside it is div2. <div1> and <div2> are not valid HTML elements, I hope that in your real document they're just called <div>. Link to comment Share on other sites More sharing options...
davej Posted September 21, 2016 Share Posted September 21, 2016 Well, it would help if you corrected your syntax... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> #rel{ position:relative; width:50%; height:200px; border:1px solid blue; overflow:hidden; } #abs{ position:absolute; height:50px; top:20px; left:50px; background-color:red; overflow:hidden; } </style> </head> <body> <h2>This is h2 title</h2> <p>This is a paragraph</p> <div id="rel"> <div id="abs">this is absolutely positioned inside a relative block</div> </div> <h3>This is h3 near bottom</h3> </body> </html> You are correct that absolute positioning should ONLY be used inside relative positioning. PLUS it should ONLY be used when necessary, such as when you really need to position something on top of something else. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2016 Share Posted September 21, 2016 General rule: If it can't be done using float, display: inline-block; margins, padding, only then use position: absolute; Link to comment Share on other sites More sharing options...
nyuille Posted September 21, 2016 Author Share Posted September 21, 2016 (edited) Hi all - Thanks for feedback. This seems like an easy layout to achieve, but I having trouble. I have grouped each image with its link and content through <div class=box1, box 2, box 3, box4, box5,etc>, but I can't layout the 5 boxes like they have it here - 2 on first row and 3 on second row. If you click on site, the area I am trying to recreate is 5 images under "We Are Mountain Village". https://townofmountainvillage.com/ I am trying something like this - CSS sheet .box1,.box2 { display: inline; float: left clear: right; } .box3,.box4,.box5{ display: inline; float: left; clear: right; } The content under these boxes is coming up the right side of page even though I say clear: right; Please help. Regards, Natalie Edited September 21, 2016 by nyuille Link to comment Share on other sites More sharing options...
Ingolme Posted September 21, 2016 Share Posted September 21, 2016 They should not be set to display: inline, leave them as they are. They should be blocks. Inline elements always allow content to be next to them. Link to comment Share on other sites More sharing options...
nyuille Posted September 21, 2016 Author Share Posted September 21, 2016 The content under the second row still comes up on second row even though I say clear: right; .box1,.box2 { float: left clear: right; } .box3,.box4,.box5{ float: left; clear: right; } Is that normal behavior and if so, how do I avoid that? Link to comment Share on other sites More sharing options...
Ingolme Posted September 21, 2016 Share Posted September 21, 2016 Clear: right only clears elements that were floated right. Clear: left will clear elements that were floated to the left. Link to comment Share on other sites More sharing options...
nyuille Posted September 21, 2016 Author Share Posted September 21, 2016 OK, I see. Thanks for your knowledge. Is there a way then to achieve the 2 rows with 2 boxes in first row and 3 boxes on second row. I have the grouping of img, text, and link achieved through divs already. Its just the overall layout that I am struggling with. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted September 21, 2016 Share Posted September 21, 2016 Float all the boxes to the left. On the third box, clear left. If you want proper alignment, you can set the widths of the first two boxes to 50% and the widths of the following 3 boxes to 33.33%. If you want spacing between those boxes you'll have to do some calculations so that the sum of widths and margins add up to 100%. 1 Link to comment Share on other sites More sharing options...
nyuille Posted September 21, 2016 Author Share Posted September 21, 2016 Thanks. Link to comment Share on other sites More sharing options...
nyuille Posted September 22, 2016 Author Share Posted September 22, 2016 Hi all - Best way to accomplish was what I figured out after tinkering with this - .row-1,.row-2 { display: -webkit-flex; } .box-1, .box-2, .box-3, .box-4, .box-5{ padding: 10px 10px 10px 10px } Link to comment Share on other sites More sharing options...
dsonesuk Posted September 22, 2016 Share Posted September 22, 2016 You are using to many classes, that give identical style. You can reference the parent class or classes to apply styling children as there cascade down. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> .row_wrap {background-color: red;} .row img {width: 100%; height: auto; float: left;} .row > div > p, .row > div > div {padding: 0 15px; } .row p {background-color: orange;} .row p a {background-color: yellow; display: block;} .row > div > div p {background-color: green; } .row {overflow: hidden;} .row.two_col {} .row > div {float: left;} .two_col > div {width:50%;} .row.three_col {} .three_col > div {width:33.33%;} </style> </head> <body> <div class="row_wrap"> <div class="row two_col"> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg" /> </p> <p> <a href="Residents.html">RESIDENTS</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_lights.jpg" /> </p> <p><a href="Businesses.html">BUSINESSES</a> </p> <div> <p> text </p> </div> </div> </div> <div class="row three_col"> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_mountains.jpg" /> </p> <p><a href="Businesses.html">GOVERNING</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_forest.jpg" /> </p> <p><a href="Businesses.html">RECREATING</a> </p> <div> <p> text </p> </div> </div> <div> <p> <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg" /> </p> <p> <a href="Businesses.html">GETTING AROUND</a> </p> <div> <p> text </p> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now