PDA

View Full Version : div width to change to 100% - 170px


194673
Feb 5th, 2007, 10:28 AM
Is it possible to have for example a div starting at top: 170px; and left: 190px; to expand from that point to the right side of the page with a right margin of 20px?

So for example
this is how the two divs would sit next to each other
Excuse my crappy ASCII art:


|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|
|__###############__&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&__|

Where the |'s would be the browser's window; the __ would be a 20px margin; the #'s would be a menu/nav type thing and the &'s would be the content. I'm trying to get the content to change width as the browser window shrinks/grows without having to have scroll bars.
_Aerospace_Eng_
Feb 5th, 2007, 10:33 AM
Yes its possible but I'm telling you right its not going to be easy using absolute positioning so stop using it when you don't have to. Look at this example
http://bonrouge.com/2c-hf-fluid.php

Good luck.
194673
Feb 5th, 2007, 10:51 AM
Tried following the guide *somewhat* to fit it to my needs, but still getting the overextended column
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>The Streets :: Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

<div id="menu">
<div class="menuimg">
<img src="images/menu_top.jpg" alt="Menu Top Image" />
</div>
<div class="menucont">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="menuimg">
<img src="images/menu_bot.jpg" alt="Menu Bot Image" />
</div>
</div>

<!----Split Menu and Content---->

<div id="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</div>
</body>
</html>
CSS

* {
border: 1px solid #00FF00;
}

body {
background: url(images/head_bg.jpg) 0 0 repeat-x #212121;
margin: 0;
padding: 0;
}

#container {
position: relative;
margin: 170px 20px 20px;
width: 100%;
display: block;
}

#menu {
float: left;
}

.menucont {
background: url(images/menu_bg.jpg) repeat;
width: 150px;
}

.menuimg {
height: 25px;
width: 150px;
}

#content {
position: relative;
border: 1px solid #FFFFFF;
position: relative;
width: 100%;
margin: 0 170px;
}
194673
Feb 5th, 2007, 10:54 AM
Nevermind, I fixed it. Thanks for the help once again aerospace. I just had to get rid of the 100% width and then change my margins around a bit.
Bill Posters
Feb 5th, 2007, 11:01 AM
* {
border: 1px solid #00FF00;
}
Are you adding that for the sake of layout debugging?

If so, you should consider using another property* as adding borders will add height and width to elements, often pushing the layout out of line, rather than showing the layout as it currently appears.

(* if you know which elements are acting up, consider adding a prominent background-color to them alone to highlight them.

Alternatively, if you're debugging the layout in Firefox, check out the Aardvark extension (http://karmatics.com/aardvark/).)
194673
Feb 5th, 2007, 11:17 AM
Yes, the border was these for debugging purposes. I'll check out that link too!