Given one div being fixed width, how do I make another div sit beside it with size 100% - the width of the first?
Question
I've got a div with a logo in it in the top left of my page, and I want to make another div alongside it for a toolbar with text. Problem is I can't seem to figure out how to get that new div to go the full width of the remaining space... it just tries to use the full width of the screen and the text shows over top of the logo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div#topbar {
width: 100%;
position: fixed;
top:0px;
left:0px;
height:133px;
background-image :url(bkgnd_header_tile.jpg);
padding: 0px;
margin: 0px;
}
div#logo {
width: 187px;
height: 133px;
position: fixed;
top:0px;
left:0px;
background-image:url('headerlogo_home.jpg');
}
div#text {
}
body {
}
</style>
</head>
<body>
<div id="topbar">
<div id="logo"></div>
<div id="text">
<span id="campuses">asdf</span>
<span id="title">Blah</span>
</div>
</div>
</body>
</html>
topbar is supposed to be one big div with height 133px and width 100%. It's used for holding an image background of the toolbar. Another div is just for a logo in the top left, width 187px.
How can I make a third div sit to the right of the image one?
3 answers
solution1
2 ACCPTED 2012-11-28 22:53:40
If I understand what you are trying to do this is what you need to do: set width of topbar. No need to set a position.
#topbar{
width:100%;
height:133px;
}
and then you have to float your logo to the left:
#logo{
width:187px;
height:133px;
float:left;
}
and then set your text to float left as well and set the width to 100%:
#text{
width:100%;
height:133px;
float:left;
}
solution2
1 2012-11-28 22:49:40
Will this work for you? It looks like you've been missing only few lines.
solution3
0
Bear in mind this is CSS3 stuff, and the spec may still change, but you could look into calc.
[ https://developer.mozilla.org/en-US/docs/CSS/calc ]
[ http://dev.w3.org/csswg/css3-values/#calc-notation ]
width: calc(100% - 187px);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.