How Can I Fill The Space Between A Left And Right Float Without Making The Right Float Wrap?
Solution 1:
Use a
float: left
on the #middle one. Also, try setting a width
, to avoid the middle div spanning to 100%
Solution 2:
As discussed in the comments below, your best bet is to use a proper grid system. Twitter Bootstrap has two great choices Default Grid System and Fluid Grid System. In addition, you can package Bootstrap from their website to only include the modules you need.
Otherwise, with the typo in # middle
fixed, you can use float: left
on #middle
to make #right
not wrap. You will also need to use JavaScript to set the width on #middle
based on screen-size, or you risk the text being too long and pushing #right
down again. A solution is easier to accomplish with a grid system!
I wrote the JS to work on window.onload
, you could also do on a resize.
Modified code: http://codepen.io/anon/pen/xfwJi
Solution 3:
One Answer :
#middle {
background-color: #999;
height: 100px;
float:left;
width:1364px;
}
Solution 4:
try floating the middle div to left as well. That should work.
#middle {
background-color: #999;
height: 100px;
float:left;
}
Solution 5:
Here is a fiddle. Check it out, it pretty much solves your problem.
Moreover, I would like to suggest you using a grid system as it will help you in making the website in a lot more easier way with very or no little problems!
CSS:
#outer {
background-color: #222;
height: 100px;
width: 100%;
}
#left {
background-color: #555;
width: 100px;
height: 100px;
float: left;
}
#right {
background-color: #777;
width: 200px;
height: 100px;
float: right;
margin-top: -100px;
}
#middle {
background-color: #999;
height: 100px;
width: 72%;
float:left;
}
#middle > p {
line-height: 100px;
color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
}
Take a look at this site, provides 10 CSS grid systems! :)
Post a Comment for "How Can I Fill The Space Between A Left And Right Float Without Making The Right Float Wrap?"