homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Float property issue
Vishal




msg:1175570
 10:55 pm on Mar 1, 2006 (gmt 0)

This is my first official try to make a full CSS layout site and am having a problem/question, was hoping someone can help me out.

Test.html code
<body class="body">

<div class="a">

<div id="a1">Area 1. Sample table type<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<br>
</div>

<form method="POST" action="http://www.testname.com/search.cgi">
<div id="a2" style="width: 200px; height: 50px">Area&nbsp; 2<br> Search Box is suppose to be here.<br>

<input type="text" name="T1" size="14" class="i1">
<input type="submit" value="Submit" name="B1" class="i1">
</div>
</form>

<div id="a3">Area 3</div>
<div id='a1'>test</div>
<p><div id='a1'>test</div></p>

</div>

</body>

CSS for the page.

body {
margin: 0px;
padding: 0px;
color: #A52A2A;
background: #ffffff;
font: normal 11px tahoma, geneva, verdana, sans-serif;
background-color : #F2F2F2;
width : 770px;
text-align : center;
}

.a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}

#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}

#a4 {
width : 100px;
float : left;
}

Now I am wanting to remove repetation of float : left; from all id's. Also, I am wanting the page to be center aligned in the browser. So how can this be done.

Thank you for the help.

 

Vishal




msg:1175571
 12:46 am on Mar 2, 2006 (gmt 0)

hum.. technically I cannot use ID again on the same page.

Light_Gear




msg:1175572
 3:39 am on Mar 2, 2006 (gmt 0)

I believe you want things to line up Hoz. without using the floating properties.

First off I use (id) for each section that I am working with. I will name the i.e. sidebar - content - header and so on. From there I use the margin feature to line everything up the way I want it.

If I have a side bar that is 200px wide, I will give the content a margin of 205px. and it will drop it right next to sidebar.

now the same can be done with a div inside another div.

If you want to float everything but do not want to retype the code for each style
like
#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}

#a4 {
width : 100px;
float : left;
}

Then Combine them
#a1,#a2,#a3,#a4{float : left;}.

I do not like to use the float feature because it does cause problems with certain web browsers.

If this is not what you had in mind repost and I will try to give you more detail.

Hope this helps

doodlebee




msg:1175573
 8:03 pm on Mar 2, 2006 (gmt 0)

I'll offer up a suggesion, too - just for variety's sake :)

You're right - you can only use "ID" once per page - you've got it backwards. HTML should look like so:

<body>

No need to call a "class" for your body tag - especially when you don't have a class for it set in your CSS :)

<div id="a">

<div class="a1">Area 1. Sample table type
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<hr />
</div>

If you'll note, I made a couple of slight changes up there - I changed your <br> tag to <hr />. The CSS to go with it should look like so:

#a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}

.a1 {
width : 400px;
float : left;
}
.a2 {
width : 200px;
float : left;
}
.a3 {
width : 145px;
float : left;
}

.a4 {
width : 100px;
float : left;
}

hr {
display:block;
visibility:hidden;
clear:both;
}

the <hr /> tag should clear your floats for you.

Hope that helps!

navjotpawera




msg:1175574
 8:51 pm on Mar 2, 2006 (gmt 0)

@Vishal: to center align the page -


body {
margin: 0px;
padding: 0px;
color: #A52A2A;
background: #ffffff;
font: normal 11px tahoma, geneva, verdana, sans-serif;
background-color : #F2F2F2;
width : 770px;
text-align : center;
}

[b]#container {
width : 770px;
padding : 0px;
margin: 0 auto;
}[/b]

.a {
width : 750px;
border-width : 1px;
border-style: solid;
border-color : Black;
padding : 0px;
}

#a1 {
width : 400px;
float : left;
}
#a2 {
width : 200px;
float : left;
}
#a3 {
width : 145px;
float : left;
}

#a4 {
width : 100px;
float : left;
}


<body class="body">
[b]<div id="container">[/b]
<div class="a">

<div id="a1">Area 1. Sample table type<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<div id="a1">Area 1</div>
<br>
</div>

<form method="POST" action="http://www.testname.com/search.cgi">
<div id="a2" style="width: 200px; height: 50px">Area&nbsp; 2<br> Search Box is suppose to be here.<br>

<input type="text" name="T1" size="14" class="i1">
<input type="submit" value="Submit" name="B1" class="i1">
</div>
</form>

<div id="a3">Area 3</div>
<div id='a1'>test</div>
<p><div id='a1'>test</div></p>

</div>
[b]</div>[/b]
</body>

because you have given the div class a fixed width, it takes up equal margin on either side when assigned an auto margin for left and right.

Vishal




msg:1175575
 10:30 pm on Mar 2, 2006 (gmt 0)

hum.. for reason, in IE the page appears in the center, while in Opera & Firefox it appears on the left side of the screen :(

Here is the header where I plan to use float function (along with main body)
[softwaredevil.com...]

Is there a way to get the page center aligned on both Opera & Firefox too?

Thanks for the help.

doodlebee




msg:1175576
 10:17 pm on Mar 4, 2006 (gmt 0)

Vishal -

Did you try navjotpawera's suggestion - encompassing the whole thing in a containment wrapper? There is absolutely no reason why what he suggested would not work in all browsers. All you have to do is stick it all in an outer cointainting wrapper and set it to "margin:0 auto" and it will center everything on the page.

bedlam




msg:1175577
 12:51 am on Mar 5, 2006 (gmt 0)

You're right - you can only use "ID" once per page - you've got it backwards. HTML should look like so:

[snip]

<div id="a">

<div class="a1">Area 1. Sample table type
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<div class="a1">Area 1</div>
<hr />
</div>

This--sorry!--is poor advice. Everybody repeat after me:

Do not use classes to define the default state of an element.

Any time you look at a piece of markup and find that the same class is applied to the same type of element repeatedly, it's a good sign that the author hasn't fully grasped the power of specificity in CSS.

Also, the markup is wrong, but I expect that part is a copy and paste error. In any case, given the sample markup, this would be a better way:

HTML
<div id="a">
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<div>Area 1</div>
<hr />
</div>

CSS
#a div { /* Styles for 'Area 1' divs */ }

This works perfectly well in all situations except where there were other divs inside #a, but in that case, I'd simply decide which set of divs is the default set and attach classes or ids to the others

Do not use classes to define the default state of an element!

-b

Vishal




msg:1175578
 1:11 am on Mar 5, 2006 (gmt 0)

Hello Bedlam,

Thank you for the reply, however I am little lost.

What if the areas in below field are suppose to have differnt width and bg colors,

<div id="a">
<div>Area 1</div>
<div>Area 2</div>
<div>Area 3</div>
<div>Area 4</div>
<div>Area 5</div>
<hr />
</div>

?

Can you please help me understand how do you expect that work?

Thank you for the help and input.

Vishal




msg:1175579
 1:18 am on Mar 5, 2006 (gmt 0)

encompassing the whole thing in a containment wrapper? There is absolutely no reason why what he suggested would not work in all browsers. All you have to do is stick it all in an outer cointainting wrapper and set it to "margin:0 auto" and it will center everything on the page.

In the existing test page, I didn't got the required result with that code, however I will try it on a new page to see if it works.

Also, on the test page I was able to get make it appear center aligned on IE + Opera + Firefox, by removing width property from body tag.

bedlam




msg:1175580
 1:25 am on Mar 5, 2006 (gmt 0)

Thank you for the reply, however I am little lost.

What if the areas in below field are suppose to have differnt width and bg colors,

Good question. That is a case where you might have different classes or ids on a bunch of similar elements--but you'll notice the post I was responding to suggested identical classes on multiple similar elements.

Incidentally, in a situation like this one, you could combine both approaches. Assuming that the several areas have some similar properties--maybe they're all the same width, or they all have the same font treatments--you could define all the properties that are the same in one place and only define the different stuff in the class declarations. For example:

HTML
<div id="a">
<div class="lorem">Lorem</div>
<div class="ipsum">Ipsum</div>
<div class="dolor">Dolor</div>
<div class="sit">Sit</div>
<div class="amet">Amet</div>
</div>

CSS
#a div { /* Properties common to all divs inside #a */ }
.lorem { /* Properties unique to items with this class */ }
.ipsum { /* Properties unique to items with this class */ }
.dolor { /* Properties unique to items with this class */ }
.sit { /* Properties unique to items with this class */ }
.amet { /* Properties unique to items with this class */ }

-b

Vishal




msg:1175581
 4:22 am on Mar 5, 2006 (gmt 0)

#a div { /* Properties common to all divs inside #a */ }

Sweet.... I should be able to save good amount of text in my css file, if I use this idea properly.

Thank you for the help, I very much appreciate it.

broniusm




msg:1175582
 8:29 pm on Mar 23, 2006 (gmt 0)

Getting elements to float and still be centered can be tricky. I'm responding b/c I'm not certain that the issue was really resolved, and because my solution turned out to be a little different. Also, I think it's a good document structure.. Thought I'd share just in case.

For me, the elusive key was to put a width on the #buttons div. Without it, the #buttons element stretches full width and all my icons line up neatly against the left. With a width, they center and wrap to the next line naturally.

(btw: I used "icon" as a default style for all elements within #buttons b/c if I were to change my element type from div's to li's to spans to whatever, my css won't need to be updated.)


<style>
body {
text-align: center;
}
#head, #content {
width: 768px;
}
#head {
height: 168px;
background-image:url(kioskheader.jpg);
}
#content {
background-image:url(kioskbg.jpg);
text-align: center;
}
#statusbar {
height: 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
text-align: center;
padding-top: 16pt;
}
#buttons {
text-align: center;
width: 300px;
}
#buttons .icon {
border: 1px solid black;
width: 70px;
float: left;
text-align: center;
}
</style>
<body>
<div id="head"></div>
<div id="content">
<div id="statusbar"></div>
<div id="buttons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<br style="clear: both;"/>
</div>

</body>


bedlam




msg:1175583
 8:40 pm on Mar 23, 2006 (gmt 0)

(btw: I used "icon" as a class name b/c if I were to change my element type from div's to li's to spans to whatever, my css won't need to be updated)

You haven't been paying attention ;-)

Do not use classes to define the default state of an element!

Your markup:

<div id="buttons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>

...simply has no need for 'class="icon"'--it's just code bloat. You could do this:

HTML
<div id="buttons">

<div>...</div>
<div>...</div>
<div>...</div>

</div>

CSS
#buttons div { ... }

Then, if your markup did change to a list, your css would only need the following change:

CSS
#buttons li { ... }

Remember that one of the key advantages to css is the ability to make global changes to a site by making small changes in the css file...

-b

doodlebee




msg:1175584
 2:20 am on Mar 24, 2006 (gmt 0)

By the way - on the page cetnering thing - you're right, you should *not* have the width set in your body. Just the outer div. For body, add this to your stylesheet:

body {
text-align:center;
}

Firefox and IE6 don't need this to center, but some other browsers (especially IE5) do, or it won't center your page.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved