Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Trying to fit two divs inside a div container

Trying to fit two divs inside a div container

Problem

I'm trying to have two Divs inside a container but they're position really weird.

I'd like the nav to be a specific width like 700px and the logo div to fit the remaining space so I put it at 100%

#headernav{
    background:#0000FF;
    height: 60px;
}
#logo{
    height:100%;
    width: 100%;
    background:red;
    height:100%;
}
#navbar{
    width:700px;
    height:100%;
    background: cyan;
}
Problem courtesy of: Batman

Solution

try calc(100% - 700px); for logo width

https://developer.mozilla.org/en-US/docs/CSS/calc

take a look at this. works fine in chrome.

http://jsfiddle.net/btevfik/W5stS/

Solution courtesy of: btevfik

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Trying to fit two divs inside a div container

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×