Menu
i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english
496
If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}
Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
