Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations The Box Model Positioning Properties

David Lin
seal-mask
.a{fill-rule:evenodd;}techdegree
David Lin
Full Stack JavaScript Techdegree Student 8,116 Points

CSS 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?

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Can you post your markup and css here so it'd be a lot easier to help.

David Lin
seal-mask
.a{fill-rule:evenodd;}techdegree
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
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.

what about float:left; ?

David Lin
seal-mask
.a{fill-rule:evenodd;}techdegree
David Lin
Full Stack JavaScript Techdegree Student 8,116 Points

I 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?

inline-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
Corwyn Wilkey
7,971 Points

The 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
Markus Ylisiurunen
15,034 Points

He 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
Corwyn Wilkey
7,971 Points

@Markus Y - My mistake, you are correct sir. Inline-block would be the appropriate value for the display property.

try: div.section, div.sidebar { margin-right: -4px;}