Menu
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left { float: left; width: 83%; display: table-cell; vertical-align: middle; min-height: 50px; margin-right: 10px; overflow: auto; } .right { float: right; width: 16%; text-align: right; display: table-cell; vertical-align: middle; min-height: 50px; height: 100%; overflow: auto; }<div class="left"></div> <div class="right"></div> <!-- needs to be 250px -->
926
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div> <div class="left"></div> CSS:
.left { overflow: hidden; min-height: 50px; border: 2px dashed #f0f; } .right { float: right; width: 250px; min-height: 50px; margin-left: 10px; border: 2px dashed #00f; } You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
53
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
