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!

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

CSS

Posted by Mickael Escroignard
Mickael Escroignard
4,122 Points

calculating width of an element that will contract and expand as the browser is resized

Hi all,

I have a page with a 55px left nav bar that goes from top to bottom. next to it, I want to add another div (possibly more) which width will rezise itself if the browser window is resized. If I put width: 100%; the width for he div actually goes outside the browser window itself. Is there a way to have a div which width will always expand to the remaining width of the browser window minus the 55px of my fixed nag bar?

4 Answers

Robert Komaromi
Robert Komaromi
11,926 Points
Robert Komaromi
Robert Komaromi
11,926 Points

Yes, try adding the following to your "other" div:

width: calc(100% - 55px);
margin-left: 55px;

You can see a demo on Plunker here.

EDIT: Clinton's approach is a little better.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

I believe this isn't supported in some browsers?

http://caniuse.com/#feat=calc

Robert Komaromi
Robert Komaromi
11,926 Points
Robert Komaromi
Robert Komaromi
11,926 Points

Yes, you're right, and it's still just a Candidate Recommendation for CSS. I don't know why I like using it though, I'm inclined to delete my answer as to not confuse people.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

No big deal, readers need to know about these things and make their own choices :)

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

Give the navigation div an absolute position. the z-index will ensure it is always on top.

`` div { position: absolute; left: 0px; z-index: 99; }

Then make the other div 100% and give it a left margin equal to the width of the nav div (this will prevent the content from being covered by the nav div.
Mickael Escroignard
Mickael Escroignard
4,122 Points
Mickael Escroignard
Mickael Escroignard
4,122 Points

thanks both....

Robert: the calc() function worked a treat.

Clinton: Thank you too but Im a CSS newbie and Im still getting up to speed with the position thing which is a total night mare. I have tooltip that appear whilst hovering over the left nag bar icon but they get hidden behind the div on the right hand side of it... been struggling with positions and z-index all afternoon. if there is a position & z-index expert out there... give me a shout... I really could do with some help there too :)

Thanks again both.

M.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Another solution is to float the nav bar left and then give the div on the right a 55px left margin.