PDA

View Full Version : Assumed width using divs


2bz2p
05-15-2008, 06:52 PM
Hello,

I am fairly new to CSS and I have been messing around with it. I understand the box model, but my question is when you work with the margins in px, what is the assumed width of the page?

For example say I wanted to put a column on the left side so what would the margin be from the left edge? say the column is 300px wide and the content section is 500px wide and I want it centered so there is say 25px on each side of the main body. Does this make the entire page 850px wide??

I must say I like the tables becuase I can picture them and with dreamweaver the show up in the design so sizing is easy, but with div containers I cant seem to visualize it nor see it

Hope that makes sense.
2b

Death Dream
05-15-2008, 07:02 PM
It all depends on how big you want your page to appear on the screen.

Pretty much if you want your page to be centered you need a wrapper div of some kind.

<div id="wrapper">
<div id="column">
whatever content here
</div>
<div id="content">
main content here
</div>
</div>and in your CSS code:

#wrapper {
margin: 0 auto;
}
#column {
width: 300px;
float: left;
}
#content {
width: 500px;
float: right;
}
Hope that helps.

~Death Dream~

-fedexer-
05-15-2008, 07:02 PM
Well i am no expert, but lets say you had a div which everything else was inside, your sidebar and main content.

You then using CSS could make the margins left and right of that div (which contains everything else) be exactly identical, therefore making your webpage centered in the middle of the screen (not sure if this is what you are aiming at).

To acheive this you would use:


(id or class) name {
margin-left: auto;
margin-right:auto;
}


Umm hope this helps a little, but i'm guessing the other members will have a better answer for you mate.

-fedexer-

Death Dream
05-15-2008, 07:08 PM
Well i am no expert, but lets say you had a div which everything else was inside, your sidebar and main content.


That's what I said above too =D

~Death Dream~

-fedexer-
05-15-2008, 07:21 PM
Seems we were both posting at the same time, ahh well we both seem to be on the same track, looks like it's right 8-)

2bz2p
05-15-2008, 07:30 PM
Thanks for the quick replies,

so what your saying is if I use px on the margins there is no real width other than what I decide on. And the wrapper will center the whole body with in the window, regardless of whether is % or px.

Thanks
2b

Death Dream
05-15-2008, 07:48 PM
Thanks for the quick replies,

so what your saying is if I use px on the margins there is no real width other than what I decide on. And the wrapper will center the whole body with in the window, regardless of whether is % or px.

Thanks
2b

margin: 0 auto;

Basically means that your have a 0px top and bottom margin while your left and right side get centered.

If you want to do a liquid theme but still want to have your paged centered I would do something like

#wrapper {
width: 85%
margin: 0 auto;
}
#column {
width: 70%;
float: left;
}
#content {
width: 30%;
float: right;
}What this says is that the wrapper will take up 85% of the screen space but will still be centered on the page.

Column and Content are within the wrapper so now if those two are going to be in the wrapper they should both me equal to 100% ... putting one at 70 and the other at 30.

(I've never done a liquid theme or even tried, but I think this is how it works.)

~Death Dream~

2bz2p
05-15-2008, 07:56 PM
margin: 0 auto;
Column and Content are within the wrapper so now if those two are going to be in the wrapper they should both me equal to 100% ... putting one at 70 and the other at 30.
~Death Dream~

Ahh I get it when working with the % the 70 and 30 are a 100% of the 85% wrapper. Gotcha

Thanks so much
2b

Death Dream
05-15-2008, 08:03 PM
Ahh I get it when working with the % the 70 and 30 are a 100% of the 85% wrapper. Gotcha

Thanks so much
2b

Exactly and no problem.

~Death Dream~

2bz2p
05-16-2008, 12:18 AM
Hey death,

Nice site, comming along really good. I am curious to know how you got the curves on all of your boxes.

Thanks again
2b

Death Dream
05-16-2008, 01:10 PM
I made them in photoshop =P

~Death Dream~

2bz2p
05-16-2008, 02:14 PM
oh so you made the full size background pic and then just add it to the css as the background-image.

Cool I gotcha

Death Dream
05-16-2008, 02:37 PM
oh so you made the full size background pic and then just add it to the css as the background-image.

Cool I gotcha

Not really, there are 3 images that I have cut up in there. The rounded corners are two images which are static, then I got the bar part which is only 1px thick and is set as the background image.

~Death Dream~

2bz2p
05-16-2008, 07:31 PM
Not really, there are 3 images that I have cut up in there. The rounded corners are two images which are static, then I got the bar part which is only 1px thick and is set as the background image.

~Death Dream~

I gotcha your talking about the nav peice, which is cool because I was aventual going to ask how that is done lol. I was talking about the rounded edges on the blocks like the featured tutorial section.

thanks again
2b

Death Dream
05-16-2008, 10:32 PM
I gotcha your talking about the nav peice, which is cool because I was aventual going to ask how that is done lol. I was talking about the rounded edges on the blocks like the featured tutorial section.

thanks again
2b

That was what I was talking about lol. They are both done the same way.

~Death Dream~

2bz2p
05-16-2008, 10:34 PM
ohh dont I feel stupid lol :roll: