Menu
with tables I can easily have a row with 2 columns, column 1 is variable width and column 2 fixed width in pixels and column 1 resizes to fill the available space. I'm transitioning to css and wondering how to do this with css..and make sure that both divs/columns stay on the same line and don't wrap.
528
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.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
The trick is to use the CSS property table-layout. It can take three values: auto , fixed , and inherit . The normal (initial) value is auto , which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
This has a right column of 300 pixels and a variable left column. The DOCTYPE is just there to make IE misbehave less. Also use of a reset CSS is recommended.
169
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
