0

I'm in the middle of coding a website and im trying to do something which i'm not sure is possible. I have a layout which I like, but I want to allow to divs to resize to fit the browser. At the minute the layout is like this: Current Layout Now I want to keep the header section the same height and width always, the same with the extra and footer div. But I want the navigation (it needs renaming) and content divs to automatically adjust so that the browser window is always filled (ideally with 10px border at top and bottom but not necessary). The whole page (obviously excluding background) is held inside a container at the moment. but this is a fixed height. This is the CSS I have

html,body{
    margin:0;
    padding:0;
}
body{
    background-image:url(images/bg2.jpg);
}
a{
    text-decoration: none;
}
#container{
    text-align:left;
    width:1000px;
    height:648px;
    margin: 0 auto;
    border-radius:30px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
}
#header{
    float:left;
    height:123px;
    width:1000px;
    background-color:#FFFFFF;
    border-top-right-radius:30px;
    border-top-left-radius:30px;
    text-align:center;
}
#links{
    float:left;
    height:43px;
    width:714px;
    background-color:#FFFFFF;
    text-align:center;
    padding-left:286px;
}
.link span{
    list-style: none;  
    border: 6px solid #1c2f45;
    font-size: 13px;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
.linkcurrentpage span{
    list-style: none;  
    border: 6px solid #1c2f45;
    background-color: #1c2f45;
    font-size: 13px;
    color: #FFFFFF;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
#content{
    position:relative;
    float:right;
    height:420px;
    width:737px;
    background-color:#FFFFFF;
    overflow:auto;
}
#galleryselector {
    float: left;
    text-align: center;
}
#navigation{
    float:left;
    width:263px;
    height:420px;
}
#extra{
    background:#FFFFFF;
    float:right;
    height:70px;
    width:1000px;
}
#footer{
    background:#FFFFFF;
    float:right;
    height:40px;
    width:1000px;
    margin: 0 auto;
    padding-bottom:5px;
    text-align: center;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
}
#footer p{
    margin: 0 auto;
}

Can anybody advise on how I may achieve this? I'm not too concerned with having a scrollbar on the content div, I just ideally don't want one on the right hand side of the page for the whole screen.

P.S I am not after website critique, the website isn't for me its for a relative who wants a site designed for her and wants the background that I have put (I know its a bit garish)

UPDATE: Ok so thanks to Hristo I have the layout just as I want it now minus one tiny detail), The screenshot below shows how the page now, The niggle I have is the navigation buttons at the top (simply just span tags with borders applied)...I want them aligned centrally to the div, the only way I found before was to apply a fixed amount of padding to the div but I dont know if that will work again...I shall upload a screenshot (apologies for the blue border around one of the h1 tags, had F12 developer tools running) and also my css for the links section as it stands now.

#links{
    float:left;
    height:43px;
    width:100%;
    background-color:#FFFFFF;
    text-align:center;
}
.link span{
    list-style: none;  
    border: 6px solid #1c2f45;
    font-size: 13px;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
.linkcurrentpage span{
    list-style: none;  
    border: 6px solid #1c2f45;
    background-color: #1c2f45;
    font-size: 13px;
    color: #FFFFFF;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}

The Layour now

Hristo
  • 45,559
  • 65
  • 163
  • 230
Stefan
  • 327
  • 1
  • 5
  • 18

1 Answers1

0

UPDATE 2

Check out the fiddle... http://jsfiddle.net/UnsungHero97/jbQfr/1/

Also, take a look at this article on horizontally centering menus.

By the way, I want to give you my two cents regarding your website layout. You definitely need to look into restructuring and reorganizing your website. Many users will be frustrated with the current layout.

For example, try resizing your browser horizontally and vertically... notice the behavior when the window is too short or too narrow; consider using min-width and min-height.

But that is just my opinion.

Let me know if you have other questions.

UPDATE

How about something like this... http://jsfiddle.net/UnsungHero97/qe6P8/9/embedded/result/

I recently asked a question about laying out a design similar to yours. Take a look at this question...

Question: complicated CSS layout... need some help
Answer: one of the answers and the fiddle for the layout

... you may be able to get some ideas on how to achieve what you're looking for.

I hope this helps.
Hristo

Community
  • 1
  • 1
Hristo
  • 45,559
  • 65
  • 163
  • 230
  • it seems similar but I cant seem to get it to function, as soon as I remove the height value of the content div or change it to use min-height it expands to to show all of the content which I dont want it to do..ive put overflow:scroll in but that doesnt seem to work – Stefan May 02 '11 at 23:40
  • @Stefan... I'll take a look and get back to you later. Just to make sure I know what you're looking for, you want the header/footer/extra to always be fixed and the nav/content to span the rest of the height of the browser window, correct? So what happens if the stuff in the content div gets really really large? Do you want the scroll bar to be just on that content div or on the whole page? Do you want the footer/extra to be pushed down when the content div gets full? – Hristo May 02 '11 at 23:49
  • @Hristo I want the header and footer to ALWAYS be at the top and bottom respectively, I want the content and nav to always fill the space between and I want a scrollbar to show on the content section if the content extends past the boundary of the div...the image will automatically resize (when I find the code again) – Stefan May 03 '11 at 08:47
  • 1
    @Stefan... got it, I'll make the changes and get back to you – Hristo May 03 '11 at 12:58
  • @Hristo ... You sir are amazing, I have one further question which I will add now as an update to the original question which you may be able to assist with. – Stefan May 03 '11 at 16:18
  • @Stefan... would you mind posting a link to the website? I need to look at more of your source to see how you've lain out the navigation. I see that you're doing a `float: left;`. If you're trying to center things, that won't work. – Hristo May 03 '11 at 19:21
  • @Hristo, It has now been available here:http://www.gemma-hyde-fashion-sketches.co.cc/stackoverflow/index2.php let me know if you need anything more, I took out the float:left for the links and made it absolute positioning, im going to play around a bit more with it anyway – Stefan May 03 '11 at 20:33
  • @Hristo... thank you very much :) , that has worked a treat i've modified it to fit my styling that I already had. Thank you for your input, just out of curiosity would I just shrink my screen to what I feel is the minimum height and width until the page starts to 'screw up' and then check those widths with the developer tools and set those values as min-height/width? also do you have any other suggestions RE: layout? at the moment my cousin (who im doing the site for) thinks its amazing and loves it but if I can help by making it look better then I will change it – Stefan May 04 '11 at 09:47
  • @Stefan... 1. you're welcome! 2. that would be one way to check for minimum height/width 3. it all comes down to what the person you're doing this for is looking for... if he wants it as such and is happy with it, then thats what you give him :) – Hristo May 04 '11 at 18:34
  • @Hristo, thank you for your input I am implementing some changes. when she said she likes it I think really she means she likes how it is laid out and relies on me to know if its a good design technically. As you will see I have accepted your answer here and I have voted up a couple of your replies as I am very grateful for your assistance – Stefan May 04 '11 at 19:09