Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Positioning within divs
Old 10-26-2007, 01:36 AM Positioning within divs
Extreme Talker

Posts: 196
Trades: 0
Hello all. Lets see if i can explain this. I will start from the inside out.

div.Data holds dynamic copy. It lives and is incorrectly spilling out the bottom of div.SiteContainer. Why is this? Shouldn't the container div stretch to fit the data within it? I know that by removing the position:absolute; in div.Data it works but i need to position the div.

Another issue is that div.PageFooter is incorrectly positioning. I want it directly below div.Data inside of div.SiteContainer.

You can find the example here, http://www.tlcgiftsandbaskets.com/demo/position.htm. This code is stripped from the home page of the URL if you want the whole thing.

Code:
<style type="text/css" title="">
body{ 
margin:0px; 
text-align: center;
}

div.SiteContainer{ /* centers to the page.*/
position: absolute;
z-index:1;
width: 960px; 
left: 50%;  
margin-left: -480px;
border: 1px solid green; 
}

div.Data{
position: absolute; 
z-index:2; 
width: 600px; 
top:100px; 
left:100px;
border:1px solid yellow;
}

div.PageFooter{ border:1px solid red; width:600px; }
</style>
Code:
<div class="SiteContainer">

    <div class="Data">

        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
        <br />
        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
        <br />
        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
        <br />
        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
        <br />
        Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
        <br />

    </div>

    <p>

    <div class="PageFooter" style="">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</div>
        
</div>
empiresolutions is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 10-26-2007, 02:10 AM Re: Positioning within divs
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
When you use positioning you remove the element from the normal document flow. As far as the browser is concerned your content is no longer inside the div. That's why it spills out.

I'm not sure what layout you're trying to achieve, but it's unlikely you really need positioning. Most of the trick in a css layout is realizing you hardly ever need to position anything.

CSS layouts usually work with floats and margins to place your elements. There are times when positioning is useful, but most of the time you don't need it.

If you can give an idea of the layout you're trying to achieve I'm sure someone can help you get there. Do you have an image of how you want things to look that you could post?
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 10-26-2007, 02:52 AM Re: Positioning within divs
Extreme Talker

Posts: 196
Trades: 0
http://tlcgiftsandbaskets.com/ shows my whole absolute positioning mess.
empiresolutions is offline
Reply With Quote
View Public Profile
 
Old 10-26-2007, 11:16 AM Re: Positioning within divs
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Wow.. div-itis and a ton of unnecessary positioning. You don't need all that, you need to learn to use the normal document flow to your advantage and 99% of the time positioning isn't necessary. I don't see any real need for it in that layout.

You might want to do some reading:
http://css-discuss.incutio.com/?page=FloatLayouts
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-26-2007, 11:27 PM Re: Positioning within divs
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
The page you linked to is looking good and I'm seeing floats in the code. Does that mean you worked things out? If you did congrats. If not is that the way you want your site to look?
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 10-27-2007, 11:45 AM Re: Positioning within divs
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
It's pretty messy in FF and siteContainer is still using position:absolute. The footer is up top over the content.

One other note - put your text inside <p></p> where they belong - and divs cannot be nested inside paragraphs.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Positioning within divs
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.17932 seconds with 12 queries