Menu
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Set display to inline-block to make the div width fit to its content. Use position: relative and left: 50% to position its left edge to 50% of its containing element. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.
div is block element. Block elements are 100% width of parent element, if width is not specified. Show activity on this post. it's taking up all the available space based on it's parent container, exactly what it's supposed to do.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>The most cross-compatible way I've found of doing this is not very obvious. You need to remove the float from the second column, and apply overflow:hidden to it. Although this would seem to be hiding any content that goes outside of the div, it actually forces the div to stay within its parent.
Using your code, this is an example of how it could be done:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Hope this is useful to anyone having this issue, it's what I found works the best for the site I was building, after trying to get it to adjust to other resolutions. Unfortunately, this doesn't to work if you include a right-floated div after the content as well, if anyone knows a good way to get that to work, with good IE compatibility, I'd be very happy to hear it.
display: flex;
Now that the Flexbox model is fairly widely implemented, I'd actually recommend using it instead, since it allows much more flexibility with the layout. Here's a simple two-column like the original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
And here's a three-column with a flexible-width center column!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
.content .right{
overflow: auto;
background-color: red;
}
+1 for Merkuro, but if the size of the float changes your fixed margin will fail.
If u use above CSS on the right div it will nicely change size with changing size on the left float. It is a bit more flexible like that.
Check the fiddle here: http://jsfiddle.net/9ZHBK/144/
Elements that are floated are taken out of the normal flow layout, and block elements, such as DIV's, no longer span the width of their parent. The rules change in this situation. Instead of reinventing the wheel, check out this site for some possible solutions to create the two column layout you are after: http://www.maxdesign.com.au/presentation/page_layouts/
Specifically, the "Liquid Two-Column layout".
Cheers!
this usage may solve your problem.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>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