CSS div wont wrap around the other divs/ making my site funk

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
lebatt
Forum Newbie
Posts: 9
Joined: Sat May 02, 2009 6:43 pm

CSS div wont wrap around the other divs/ making my site funk

Post by lebatt »

Ok, I tried making a header div, a links div, a main content div, and a footer div... but i tried to wrap a div around them all to easily change the background color of it to white and the outside to black. But I would have black all between the links and main div, and it just wouldnt go sad.gif the styles sheet is at http://www.318desprairies.com/styles.css

BUT... i'm giving up on that for now but if someone had the time to just look for a second as to why the .con div wouldnt wrap around it... but can someone help me with the below..

Ok here's the basic setup a Fixed header 950px wide
A fixed left links area say 150px wide,
A fixed body main page of 800px wide
and a fixed footer with a width of 950px
The only thing I want to have scrolling is the Main page

I want it all wrapped in one div so I can make the background in that div white, and have the background of the site black.

Also I think the height of the body needs to be 100% so it can fit on any size screen, but I want the width fixed.

Thanks

if I need to make a few changes to the px I can no problem but Just need help with the initial setup.
Thanks

All I want is the header to always be the same, and the footer. i just want the body main to scroll.

Can someone help me set this up? i'll build the rest of the site from there.

For reference, The site I am working on is http://www.318desprairies.com password is 318DPL (after you click Englsih) So you can see the setup I am trying to accomplish. but since I changed the background to black everything got messed up and now someone told me I should of built it using %'s. I havent done that before and need to have this done for tomorrow as a sample.

Please any help would be great. I'll follow the template and build the site from there.

Thanks
D
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS div wont wrap around the other divs/ making my site funk

Post by kaszu »

In your css you are setting height to 100% for ".maincontent" (it has padding and it's not at the top of the page), you shouldn't do that! Use min-height and height for IE6 and it should be set for wrapper, not content.
Also on other pages ".con" has a fixed height, but content is longed than it, so it's messed up. Remove height and clear float instead.

If you need a template, you can google for it, there are a lot of them already on the net. "xhtml css layouts" returned this.

If you are willing to learn css, html etc., please ask and I will be happy to help, but i'm not doing work for you.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS div wont wrap around the other divs/ making my site funk

Post by kaszu »

PM from lebatt:
Yes I'm really trying to learn and willing to learn. My problem was i had the site designed nicely into a white background like they asked. Then once I went to a black background it changed so I made the .con div to wrap around my whole content.

I have updated it within the last 2 hours and checked it on most browsers it looks great. IE6 though i did have a problem and I'm new to coding so I dont know much about coding before IE8. Plus I use dreamweaver and I'm told that is a internet explorer based coder.

A friend told me to design it in %'s but I'm not sure how that works, If it works by making a div container, then making other div's with %'s sizes inside it.
Just checked with IE6 and website seems to be fine now, I guess everything was fixed.

I'm not a fan of DreamWeaver, because of the visual editor, but as long as you keep checking in all browsers it shouldn't matter.

Biggest difference between % and px (also same for em and px) is that if set in px, then that size will be the same if put in any container (place), but if set in %, then it's size is % of containers element. Eg:

Code: Select all

.class1 { font-size: 75%; }
.class2 { font-size: 50%; }

Code: Select all

<div class="class1">
<!-- If page font size is 16px (it's default), then all inside will be with font size 12px = 75% of 16px-->
    <div class="class2"></div>
    <!-- Since container is 12px, then content font size of class2 will be 50% of it = 6px; if there wouldn't be that container around this div, then size would be 50% of 16px = 8px -->
</div>
Of course if you want page with fixed size width, then you must use px for page container element.

You should check useful resources
Post Reply