PDA

View Full Version : Help! Div positioning/size?


badutahboy
12-01-2008, 07:12 AM
Ok, here's my scenario...

I've got a central div on my page which I want to size to 100%... There's a nav div on the left side that's 150px wide, and a form div on the right which is 250px wide.

How do I go about creating a div in the center section for the body of my page, sized to 100%, but taking into account the boxes on the right and left?

I've tried margins, positioning, etc... AFAIK, I can't create a box that's 100% - 250px, can I?

Anyone got some suggestion help?

coloeagle
12-01-2008, 02:57 PM
What you're wanting is a 3 column layout. There are a few ways this can be done.

You can float three divs left giving percentage widths for each.
You can float one div left, float one div right and have the center content automatically fill in the center.
You can use absolute positioning for 3 div's.

Just kinda depends on how you want your code.

badutahboy
12-01-2008, 04:27 PM
What you're wanting is a 3 column layout. There are a few ways this can be done.

You can float three divs left giving percentage widths for each.
You can float one div left, float one div right and have the center content automatically fill in the center.
You can use absolute positioning for 3 div's.

Just kinda depends on how you want your code.



I'm with you.. what I want is to float one left, one right, and have content fill the center.. the problem I'm having is I don't know how to size the center div so it'll stretch with the browser window.

The only way I've found that "works" is to make the left and right div nest inside the main div.. but then, my content gets hidden underneath the other two divs.

phpdude108
12-01-2008, 11:42 PM
Have one main-div (don't give width, it will fill the browser)

Inside the main-div have three other divs.

One div floats to the left (with width)
Middle one dive (also floats to the left width 100%)
And third div floats to the right (with width)

Try it (I am also new to this webdesigns)

Hope this helps
PHPDUDE108

phpdude108
12-01-2008, 11:46 PM
Also make sure you have some sort of text inside the divs (even if dummy text or content or even one letter inside)

(if there is no text or content inside the divs, i think divs are not registered, or something like that)

May help
PHPDUDE!)*

badutahboy
12-01-2008, 11:53 PM
Have one main-div (don't give width, it will fill the browser)

Inside the main-div have three other divs.

One div floats to the left (with width)
Middle one dive (also floats to the left width 100%)
And third div floats to the right (with width)

Try it (I am also new to this webdesigns)

Hope this helps
PHPDUDE108

When I do that, it makes the center div (100%) stretch behind the other two divs, hiding the text inside that div.

domedia
12-02-2008, 01:55 PM
Then you're doing something wrong. HTML elements do not naively overlap each other like that I think.

coloeagle
12-02-2008, 02:48 PM
You have one div floating left with a set width, one div floating right with a set width.
Do not specify a width for the center div. No-set-width=fluid Now without a width set unless you have some content inside this div it will not show up when you view the page.

Insure you have these three divs separated and not one contained inside each other.

Make sure your html is in the proper order.

badutahboy
12-03-2008, 02:45 AM
You have one div floating left with a set width, one div floating right with a set width.
Do not specify a width for the center div. No-set-width=fluid Now without a width set unless you have some content inside this div it will not show up when you view the page.

Insure you have these three divs separated and not one contained inside each other.

Make sure your html is in the proper order.


Gracias (to both recent posters)... I'll give this a try.

I had been doing it with one central div, with the left/right divs nested inside it...

badutahboy
12-03-2008, 06:56 AM
Man, I'm DUMB.

I had it all messed up, all over again... lol.

So, here's how to do it, step by step, in case someone else has this same problem and searches.

Step 1...

Create APDiv1.. size it appropriately (in my case, I made it 200px wide, 800px tall)
position it (absolute), 0px from left, 0 px from top.

Create AP div2... size it, position it (absolute), 0 px from right, 0 px from top.

create APDiv3... size its height (leave width blank). Position it 0px from top, and the appropriate # of px from left and right.. in my case, I positioned it 205 from left, and 205 from right, to create a 5px space between divs.


worked like a charm.

Thanks a ton, guys... I really appreciate the prompt help.

badutahboy
12-03-2008, 07:18 AM
Ok, Here's my next question:

Is it possible to tie the height of my divs to each other?

For example... my center div is the content div.. I want to set up my template to resize itself to the size of the content... presumably, that means I'd leave both height and width blank..

HOwever, if the left div is a nav bar, and the right div is a form.. presumbably they'll be significantly shorter than any content in the center div.

How do I go about making them resize to the height of the middle div, in order to maintain the integrity of my layout?

edbr
12-03-2008, 07:31 AM
faux images, do a search this was answered within a week or two.
If you look at the free templates on this site there is one, tyhat has several different layouts (6 or multiflex Ithink) might help you