How to position two divs side by side where the second width is 100%?
I want to achieve this:
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
Sample html on jsFiddle.
Is it po开发者_JS百科ssible to place two divs side-by-side leaving the second div with all remaining space?
Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.
Here is the updated version of your jsfiddle. Let me know if you have any questions about it.
Here it is:
CSS:
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
And on jsFiddle (It's playing up at the moment)
Hope this helps!
Here is how it will be done :
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
Try this:
<html>
<head>
<title>Tabla de contenidos - Template</title>
<style type="text/css">
div {
border: 1px solid #000000;
}
#divleft{
width: 60px;
float: left;
}
#divright{
display: block;
margin-left: 62px;
}
</style>
</head>
<body>
<div id="divleft">This DIV has a width of 60px.</div>
<div id="divright" >This DIV occupies the rest of the page...</div>
</body>
</html>
The 62px margin is to avoid overlap the 1 extra px of each border.
another option is to use the flexible box model
this working proposal is supported in recent firefox, chrome, and safari.
it can be ported to unsupported browsers using flexie.js.
there is new way to arrange elements whit CSS3 Check here this page Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
- flex-start: Items align to the left side of the container.
- flex-end: Items align to the right side of the container.
- center: Items align at the center of the container.
- space-between: Items display with equal spacing between them.
- space-around: Items display with equal spacing around them.
加载中,请稍侯......
精彩评论