using FLOAT and DIVS instead of tables 1

jimberger · Jun 3, 2008

Hi,

I am trying to make my layout with divs and not use tables. I am using the float property on my divs to align my columns into 3 etc..however, when i resize the IE window, the controls on the page move around and the layout messes up. what is going on here? how can i make the layout controls placed inside my divs stay still regardless if i resize the window or not?

thanks for your help

traingamer · Jun 3, 2008

You could apply a fixed width to your divs and 'wrap' them inside a fixed-width 'holding' div.

You could apply a max-width (except in IE).

You could a apply % widths to all of your divs.

I could give lots more generic answers. What are you trying to accomplish? (be specific- or post enough code or a link for more specific questions/answers).

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

jimberger · Jun 4, 2008

thanks traingamer. I will work on doing something like this solution this afternoon and let you know how i get on.

Cheers

jimberger · Jun 4, 2008

here is my 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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
@import url( css/master.css );
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<fieldset class="fieldholder">
<ol>

<li>
<div class="fieldlabel">element1:</div>
some text

</li>

<li>
<div class="fieldlabel">element1</div>
some text
</li>

<li>

<div class="fieldrowholder">

<div class="formcolumn">
<div class="fieldlabel">one col:</div>
some text

</div>

<div class="formcolumn">
<div class="fieldlabel">another col:</div>
some text

</div>

</li>

</ol>

</fieldset>

</div>
</form>
</body>
</html>

my css

html, body {
height: 80%;
}

body
{
font-family : Tahoma, Arial, Helvetica, Verdana, MS serif;
color: #666666;
font-size: 0.75em;
margin: 0;
padding: 0 ;
background-color: #fff;

}

a:link {
font-family: Tahoma, Arial, Helvetica, Verdana, MS serif;
color: #666666;
text-decoration: underline
}

a:visited {
font-family: Tahoma, Arial, Helvetica, Verdana, MS serif;
color: #666666;
text-decoration: underline
}

a:hover {
font-family: Tahoma, Arial, Helvetica, Verdana, MS serif;
color: #666666;
text-decoration: none
}

p
{
font-weight: normal;
margin:0;
}

h1 {
font-size:1.4em;
line-height:1.2em;
font-weight:bold;
margin:0;
}

h2 {
font-size:1.2em;
font-weight:bold;
margin:0;
}

/*---------holders------------*/

.fieldholder {
padding: 4px 0 8px 0px;
margin:0 0 0 0;
border: none;
}

.fieldholder ol {
list-style-type:none;
border:none;
padding:0;
margin:0;
}

.fieldholder li {
margin: 10px 0 2px 0;
padding: 0 16px 0 16px;
border:none;
text-align: left;

}

.formcolumn
{
float:left ;
margin: 0 0 0 0px;
width: 400px
}

.formcolumnsmall
{
float:left ;
margin: 0 0 0 6px;
width: 300px;
}

.formcolumnxsmall
{
float:left ;
margin: 0 0 0 6px;
width: 250px
}

.formcolumnwide
{
float:left ;
width: 100%;
margin: 0 0 0 0px;
padding: 6px 0 0 0;
}

.fieldrowholder
{
width:100%;
}

.fieldlabel
{
font-weight:bold;
margin: 3px 0 0 0;
padding: 0 0 0 0;
float:left;
width: 100px;
}

basically when the page is maximises it looks ok, until the the IE window is shrank, then the 2nd col moves onto the next line..!

johnwm · Jun 4, 2008

Your formcolumn elements are floated with a fixed width so they will roll onto the next row when there is insufficient width. Set their width to a suitable % value instead of a pixel value.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

traingamer · Jun 4, 2008

Or set a sufficient width in the wrapping divs. Instead of

Code:

.fieldholder {
    padding: 4px 0 8px 0px;
    margin:0 0 0 0;
    border: none;
}

you could try (among many other things)

Code:

.fieldholder {
    padding: 4px 0 8px 0px;
    margin:0 0 0 0;
    border: none;
    [COLOR=blue]min-width: 850px;[/color]

}
[COLOR=blue]* html .fieldholder {
    width: 850px;[/color]
}

min-width sets a minimum width for modern browsers.(not IE6)
The second is a hack for just IE6 to set a fixed width.
You could also use conditional comments to load an IE6 specific css file rather than the hack.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

using FLOAT and DIVS instead of tables 1

jimberger

Programmer

traingamer

Programmer

jimberger

Programmer

jimberger

Programmer

johnwm

Programmer

traingamer

Programmer

Similar threads

Part and Inventory Search

Sponsor