How to make div expand all the way to the right
The demo page: CLICK HERE
I have made a picture to show:
As clearly seen in the picture, there is a gap from the div left_bg and the div middle_bg. The left_bg has no content, and its width should be fluid and fit inside it's div container top-container. Just to help demonstrate the gap I have it set left_bg to width:500px. However, Please note that the width should be fluid. The div middle_bg will also be fluid, as it will allow for different text longer or shorter.
How can I get rid of this gap and allow left_bg to fit?
Update
I am thinking that perhaps using CSS like a table would accomplish what I am after. I tried tweaking and messing around but I could not quite get it to work. I have set 100 rep bounty to assist me with 开发者_如何学运维this problem.
Using tables would be the best way of doing this
<table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0pt; margin: 0pt;">
<tbody>
<tr align="top">
<td style="width: 100%; height: 85px;">
<div class="left_bg">
</div>
</td>
<td style="">
<div class="middle_bg">
<p>
Michicraft Boats</p>
</div>
</td>
<td>
<div class="right_bg">
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="top-container-links">
<a href="#">Find Nearest Dealer</a> | <a href="#">Request a Quote</a></div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
and change your css to
#top-container .left_bg
{
background: none repeat scroll 0 0 #A3AFC6;
border-color: white -moz-use-text-color white white;
border-style: solid none solid solid;
border-width: 1px 0 1px 1px;
height: 85px;
width: 100%;
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
behavior: url(/PIE/PIE.htc);
}
#top-container .middle_bg
{
background: none repeat scroll 0 0 #A3AFC6;
border-top: 1px solid white;
float: right;
height: 44px;
margin-top: -42px;
text-align: center;
white-space: nowrap;
}
#top-container .middle_bg {
width: 263px;
}
Since #top-container is 775px, .left_bg is 500 with a left margin of 1 and .righ_bg is 10px with a right margin of 1.
if you set its width to 514px it touches the blue. if you want it to go all the way to the right then change #top-container .left_bg
to
position:absolute; width:773px;
Usually it is done by seeting the div to width: 100% and the element itself and the elements right of it floating.
Got it stick to right by setting width of #top-container .left_bg to 514px.
Edit :
change #top-container .middle_bg p to absolute positioning :
position:absolute;
right:2px;
bottom:0px;
and add into #top-container
position:relative;
also keep #top-container .left_bg width to 514px.
I think you're over-complicating the layout of that navigation area. I tried this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body, html {
background-color: #949dad;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.brand {
color:#FFFFFF;
background-color: #949DAD;
-moz-border-radius:10px 10px 0 0;
border:1px solid white;
border-bottom-style: none;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:31px;
margin:44px 0 0 0;
min-width:215px;
padding:5px 10px 0;
position:relative;
float: right;
height: 36px;
overflow: visible;
}
.brand_container {
font-size:12px;
background-color:#A3AFC6;
border: 1px solid white;
height:85px;
text-align:center;
-moz-border-radius:20px 0 0 20px;
background:none repeat scroll 0 0 #A3AFC6;
float:left;
width:800px;
padding:0px 5px;
margin:0 0 20px 0;
}
.brand .links {
width:100%;
float:right;
clear:both;
margin-top:1px;
font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
.brand .links a{color:#fff; text-decoration:none;}
.brand .links a:hover{color:#fff; text-decoration:underline;}
.body {
margin-top: 105px;
width:800px;
padding:0px 5px;
border: 1px solid white;
clear: both;
background-color:#A3AFC6;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="brand_container">
<div class="brand">
<p>Michicraft Boats</p>
<div class="links"><a href="#">Find Nearest Dealer</a> | <a href="#">Request a Quote</a></div>
</div>
</div>
<div class="body"> Content here <br><br><br><br></div>
</body>
</html>
加载中,请稍侯......
精彩评论