Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
David Lin
Full Stack JavaScript Techdegree Student 8,116 PointsCSS layout
i set my wrapper div with width of 80% of the body element. To make up 100% width of my div(wrapper) element, I set my second div(section) as 75% while third div (sidebar) as 25%; however, that causes my sidebar to drop below the section div even though both have zero margins and padding when I check with firbug. Both elements are set as inline-block. how to fix the problem so both section and sidebar can align together?
David Lin
Full Stack JavaScript Techdegree Student 8,116 Points.wrapper { width: 70%; height: 100%; margin: auto; }
/--header--/ .header { height: 20%; background-image: url(/Users/Davnymt/Desktop/CSS/escheresque_ste.png); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.header h1 { display: block; margin-left: 70%; margin-top: 0; font-family: Pacifico; text-shadow: 2px 2px 6px #FFF5EC; }
/--Nav--/ .nav { margin-left: 10%; list-style-type: none; display:inline-block; position: absolute; top: 75px; }
.nav li { padding-right: 20px; text-shadow: 2px 2px 3px #A99FA5; border-radius: 0 5px 0 5px; box-shadow: 2px -1px 2px #A99FA5; border-bottom: none; display: inline-block; font-family: Pacifico; font-size: 1.2em; color: #E9DDD3; }
/--secondBody--/ .secondBody { width: 75%; margin-top: -20px; display: inline-block; background-image: url(/Users/Davnymt/Desktop/CSS/green_gobbler.png); border-top-left-radius: 10px; }
/--sidebar--/
.sidebar {
width:25%;
margin-top: -20px;
display: inline-block;
background-image: url(/Users/Davnymt/Desktop/CSS/connect.png);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: 5px 0 2px #929E9E;
}
.sidebar img { margin: 20px; }
What I am trying to do is to align secondbody and sidebar horizontally while the width of secondbody and sidebar are slightly narrower than the header to create a "T" shape overall layout. I know float will solve the problem but just curious why inline block can't solve it since i also did the CSS reset.
4 Answers
Corwyn Wilkey
7,971 Points(sorry, I posted earlier but my markup was all wonky. Apologies for any confusion if you saw my previous comments)
The issue is probably the white-space from the line break in your html? I imagine your code probably looks something like this?
<div class="wrapper">
<div class="section">Some content here</div>
<div class="sidebar">Some content here</div>
</div>
You need to change your code remove the line breaks and look like this...
<div class="wrapper"><div class="section">Some content here</div><div class="sidebar">Some content here</div></div>
As I mentioned before, inline-block respects the white space caused by line breaks in your HTML. Using the float property is a viable solution, but I could cause issues with your layout down the road if you change floats and may not be as easy to maintain. Ultimately, you don't need to use the float property, so why inject unnecessary code. I'd go with the simplest solution for ease of use and maintenance.
jne
12,613 Pointswhat about float:left; ?
David Lin
Full Stack JavaScript Techdegree Student 8,116 PointsI know the property float will solve the problem. I am just curious why the problem can't be solved by using inline-block. I thought we can adjust horizontal margin and padding attributes while using inline block. Also, I reset CSS with nomralize.css, wouldn't that help?
jne
12,613 Pointsinline-block should work I think. Post your html and css and I'll take a look at it. Normalize.css do remove default padding and margins so it shouldn't be a problem. Why don't we ask Nick Pettit on this...
Corwyn Wilkey
7,971 PointsThe reason the your div's aren't falling inline is because you are using the "inline-block" value for your display property, which respects the "whitespace" within the html that affects both block and inline-block elements in HTML. Simply setting the value to 'Inline" (which is also happens to the the default value) will solve the problem and eliminate any unnecessary markup. You could set a value for the float property, but if the goal is to follow the DRY principle then why use unnecessary markup?
Markus Ylisiurunen
15,034 PointsHe wants to set the width of divs, so you can't set display to inline. I you do so you can't control the size of divs.
Corwyn Wilkey
7,971 Points@Markus Y - My mistake, you are correct sir. Inline-block would be the appropriate value for the display property.
benevolentescalator
Courses Plus Student 9,834 Pointstry: div.section, div.sidebar { margin-right: -4px;}
Markus Ylisiurunen
15,034 PointsMarkus Ylisiurunen
15,034 PointsCan you post your markup and css here so it'd be a lot easier to help.