PDA

View Full Version : Stop content expanding divs


bee80
01-05-2009, 08:11 PM
ok so ive done the tutorial, messed about with my own ideas, found other tutorials on div layouts.... but how do i stop content expanding the divs horizontally? my 2 content divs are inside a centred wrapper div but if i type in the smaller left div it expands into the other? any ideas?

Corrosive
01-05-2009, 08:20 PM
ok so ive done the tutorial, messed about with my own ideas, found other tutorials on div layouts.... but how do i stop content expanding the divs horizontally? my 2 content divs are inside a centred wrapper div but if i type in the smaller left div it expands into the other? any ideas?

Set a width on both of them.

bee80
01-05-2009, 08:28 PM
i have, of 160px and 605px , 10px border on each =785px
wrapper size = 785px
is the wrapper the problem as this also expands!! ?

code for wrap:

body {
text-align : center ;
min-width : 785px ;
}

#wrapper {
width: 785px;
text-align : left;
margin-right: auto;
margin-left: auto;
position : relative;
background-color: #FFFFFF;

edbr
01-06-2009, 01:14 AM
maybe your complete code might help us see

bee80
01-13-2009, 07:55 PM
ok heres the html code:<!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=iso-8859-1" />
<title></title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />

<link href="css/links.css" rel="stylesheet" type="text/css" />

<link href="css/body.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="title"></div>
<div id="login">
<form id="frm_login" name="frm_login" method="post" action="">
<table width="100%" border="0" cellpadding="o" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="55%" class="Login">Email</td>
<td width="45%"><div align="right">
<input name="textfield" type="text" class="Login" size="15" maxlength="30" />
</div></td>
</tr>
<tr>
<td><span class="Login">Password</span></td>
<td><div align="right">
<input name="textfield2" type="password" class="Login" size="10" maxlength="25" />
</div></td>
</tr>
<tr>
<td><span class="Login">Remember me</span>
<input type="checkbox" name="checkbox" value="checkbox" /></td>
<td><div align="right">
<input type="submit" name="Submit" value="Login" />
</div></td>
</tr>
</table>
</form>
</div>
</div>
<div id="navBar"></div>
<div id="wrapper">
<div id="leftContent"> leftContent goes here </div>
<div id="mainContent"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>


and heres the css:body {
text-align : center ;
min-width : 994px ;
}

#wrapper {
width: 994px;
text-align : left;
margin-right: auto;
margin-left: auto;
position : relative;
background-color: #FFFFFF;
}
#leftContent {
float: left;
width: 160px;
padding-top: 10px;
padding-right: 10px;
background-color: #FFFFFF;
}
#mainContent {
float: right;
width: 814px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #FFFFFF;
}
#title {
float: left;
width: 724px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #FFFFFF;
}
#login {
float: right;
width: 250px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #FFFFFF;
}
#footer {
height: 20px;
background-color: #FFFFFF;
clear: both;
background-image: url(../images/footer_bg.jpg);
background-repeat: repeat-x;
width: 100%;
}
#navBar {
height: 30px;
background-color:#FFFFFF;
clear: both;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/navBar_bg.jpg);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

Corrosive
01-13-2009, 08:04 PM
ok heres the html code:<!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=iso-8859-1" />
<title></title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />

<link href="css/links.css" rel="stylesheet" type="text/css" />

<link href="css/body.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="title"></div>
<div id="login">
<form id="frm_login" name="frm_login" method="post" action="">
<table width="100%" border="0" cellpadding="o" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="55%" class="Login">Email</td>
<td width="45%"><div align="right">
<input name="textfield" type="text" class="Login" size="15" maxlength="30" />
</div></td>
</tr>
<tr>
<td><span class="Login">Password</span></td>
<td><div align="right">
<input name="textfield2" type="password" class="Login" size="10" maxlength="25" />
</div></td>
</tr>
<tr>
<td><span class="Login">Remember me</span>
<input type="checkbox" name="checkbox" value="checkbox" /></td>
<td><div align="right">
<input type="submit" name="Submit" value="Login" />
</div></td>
</tr>
</table>
</form>
</div>
</div>
<div id="navBar"></div>
<div id="wrapper">
<div id="leftContent"> leftContent goes here </div>
<div id="mainContent"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>


and heres the css:body {
text-align : center ;
min-width : 994px ;
}

#wrapper {
width: 994px;
text-align : left;
margin-right: auto;
margin-left: auto;
position : relative;
background-color: #FFFFFF;
}
#leftContent {
float: left;
width: 160px;
padding-top: 10px;
padding-right: 10px;
background-color: #FFFFFF;
}
#mainContent {
float: right;
width: 814px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #FFFFFF;
}
#title {
float: left;
width: 724px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #FFFFFF;
}
#login {
float: right;
width: 250px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #FFFFFF;
}
#footer {
height: 20px;
background-color: #FFFFFF;
clear: both;
background-image: url(../images/footer_bg.jpg);
background-repeat: repeat-x;
width: 100%;
}
#navBar {
height: 30px;
background-color:#FFFFFF;
clear: both;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/navBar_bg.jpg);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

Hi Bee

Please wrap code in code tags on the forum.

You have used the id 'wrapper' twice. That can't be helping :wink:

You might also want to check that all of your divs and tables have closing tags. By the way, is there anything on your site that has to be in a table? You'd do better having a pure CSS site IMO.

bee80
01-13-2009, 08:54 PM
ok sorry will do :)

can i not use the div 'wrapper' twice? as i want title/login and main content/left content fixed in centre with navbar and footer expanding to browser ,it seems fine in ie6,google chrome,netscape 6 and firefox.

is it not ok to use tables for form elements such as the login box? how is this achieved with css if not tables? nesting divs?

domedia
01-13-2009, 09:27 PM
ok sorry will do :)

can i not use the div 'wrapper' twice?
A CSS ID is unique. You can't have two instances of it, it defeats the whole purpose of using it. If you have some style that you want to use multiple times on a page, use a CSS Class.

is it not ok to use tables for form elements such as the login box? how is this achieved with css if not tables? nesting divs?
Tables are for tabular data, it has nothing to do with a login function :-)
I would do a login box like this:

<div id="login">
<form>
<p>
Login:
<input>
</p>
</form>
</div>

bee80
01-13-2009, 09:45 PM
you mean like this?

<div id="login">
<div align="right"> <form id="frm_login" name="frm_login" method="post" action="">
Email
<input type="text" name="textfield" />
<br />
Password
<input type="text" name="textfield2" />
<br />
Remember me
<input type="checkbox" name="checkbox" value="checkbox" />
&nbsp;
<input type="submit" name="Submit" value="Login" />
</form></div>
</div>

Corrosive
01-14-2009, 07:10 AM
you mean like this?

<div id="login">
<div align="right"> <form id="frm_login" name="frm_login" method="post" action="">
Email
<input type="text" name="textfield" />
<br />
Password
<input type="text" name="textfield2" />
<br />
Remember me
<input type="checkbox" name="checkbox" value="checkbox" />
&nbsp;
<input type="submit" name="Submit" value="Login" />
</form></div>
</div>

I guess so. Bit difficult to tell how it will look as we can't see the page. As Domedia says mate. IDs you get to name them and you can use them only once on a page, classes you get to name them and can you use them as many times as you like on a page. Tags are named for you and you can use them as many times as you like on a page.

bee80
01-14-2009, 04:11 PM
so should i just name it in html : <div class="wrapper">??
then what in the css??
#wrapper { or
.wrapper {
please help :)

Corrosive
01-14-2009, 05:43 PM
so should i just name it in html : <div class="wrapper">??
then what in the css??
#wrapper { or
.wrapper {
please help :)

If you want to use it twice then it should be .wrapper which makes it a class.

bee80
01-14-2009, 07:14 PM
thanks just started my new book 'CSS the missing manual' and it explains all this in the first 40 pages!! sorry for wasting time :)
ps. still hasnt stopped the divs expanding though lol,

domedia
01-15-2009, 06:14 AM
A DIV is a block element, which means it will always take up the available horizontal space. You can set a width to it in CSS to stop this from happening.
thanks just started my new book 'CSS the missing manual' and it explains all this in the first 40 pages!! sorry for wasting time :)
ps. still hasnt stopped the divs expanding though lol,

bee80
01-15-2009, 04:25 PM
both box width's have been set in pixels, is it because the other box is empty?
Does it actually matter that it expands if i just make my content to the pixel widths i.e images and such. thanks