Jump to content

Ruddlesdin

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

Profile Information

  • Location
    Cambridge, UK

Ruddlesdin's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Ruddlesdin
    Thanks again dsonesuk, Overflow y had done the trick. I noticed that the bottom of the scroll bar in main was behind my footer but changing the main height from '100%' to 'auto' moved the bottom of the scroll bar into the visible part. I can now resize my browser window and the header and footer stay put and the main window resizes automagically. I am aware that this thread has moved on from a sticky footer and that I should have started a new thread for the main container scroll bars. Here is the final (hopefully) fiddle for my layout: (Pauls Layout) http://jsfiddle.net/Ruddlesdin/rrHru/ Thanks to all involved. I couldn't have done it without you Thanks, **_Paul_**
  2. Ruddlesdin
    Thank you dsonesuk, for spending the time on this. It shows that I have a lot to learn yet. I like what you have done and I will surely use this in the future. I did notice when I put this in fiddle that as I scrolled down the header moved off. What I would be looking for ideally is for the header and the footer to remain stuck to the top and bottom respectively. Once the main content fills over its visible space I would expect to see scroll bars on just the main container only. Can this be done with just css3 or does this need jquery?
  3. Ruddlesdin
    Thanks for all your help with this. Learning HTML5 has not been as simple as I first thought it would be. It is apparent that there are very specific combinations of style that need to be inserted, sometimes in the right order, and if you get just one of those wrong then the whole of what you are trying to achieve won't work. Great challenge though. With the help from the forum I have been able to achieve exactly the layout I was looking for. Here's my fiddle for anyone else interested in this layout. http://jsfiddle.net/Ruddlesdin/rrHru/4/ (And I name this layout "Paul's Layout" unless there is already a name for this layout) <body id="body"> <div id="wrapper"> <div id="header"> <div id="headerLeft">1</div> <div id="headerRight">3</div> <div id="headerMiddle">2</div> </div> <div id="main">4</div> </div> <div id="footer">5</div></body> body,html{ height:100%; margin:0; padding:0;}#wrapper { height:100%; position:relative; width:100%; margin:0; padding:0;}#header { height: 50px; width: auto; background: orange;}#headerLeft { float: left; width: 100px; height: 100%; background: green;}#headerMiddle { height: 100%; background: red;}#headerRight { float:right; width: 100px; height: 100%; background: blue;}#main{ background:yellow; width: auto; height:80%; /* Not sure where the figure 80% is calculated from but it worked for me ???? */}#footer {position:fixed;bottom:0px;height: 50px;width: 100%;background: pink;}
  4. Ruddlesdin
    I always try to figure out what I can first, then google and forums, but this had me stumped for a long time. Many thanks again to this great forum. Thanks dsonesuk. Aside, how can I get the "main" to occupy all the space between the header and the footer? If the main needs more space then it scrolls so footer always at bottom of viewable browser window? Will this need the use of some jquery? Thanks again. **_Paul_**
  5. Ruddlesdin
    I have been googling sticky footer but whichever way I try to implement it, it doesn't seem to work. I have probably missed something really stupid knowing me Could you gurus kindly please take a look at my code and let me know where I have gone wrong please. Here's my fiddle: http://jsfiddle.net/Ruddlesdin/2N2Gb/ (The idea is to make main fill the gap between a fixed height header and footer which fills the whole browser window) <body id="body"> <div id="wrapper"> <div id="header"> <div id="headerLeft"></div> <div id="headerRight"></div> <div id="headerMiddle"></div> </div> <div id="main"></div> <div id="footer"></div> </div></body> #body{ height:100%;}#wrapper { min-height:100%; height:auto; position:relative; height:100%; width:100%; margin:0; padding:0;}#header { float: top; height: 50px; width: auto; background: orange;}#headerLeft { float: left; width: 100px; height: 100%; background: green;}#headerMiddle { height: 100%; background: red;}#headerRight { float:right; width: 100px; height: 100%; background: blue;}#main{ background:yellow; width: auto; padding-bottom:50px;}#footer { position:absolute; bottom:0; height: 50px; width: auto; background: pink;}
  6. Ruddlesdin
    SOLVED: thank you so much. I have no hair left but yes, all I did was move the html tags around and it worked exactly how I wanted it to. There's about 4 hours I will never get back but I certainly won't forget for the future. Thanks, **_Paul_**
  7. Ruddlesdin
    Hi all,I am having issues trying to fill the space between 2 divs in a header. I have googled this to death and the suggestions provided all don't seem to work. My div that is floated right seems to get forced down. Image of my header attached. My jsfiddle is here: http://jsfiddle.net/Ruddlesdin/V7JDB/2/ <body> <div id="header"> <div id="divLeft"></div> <div id="divMiddle"></div> <div id="divRight"></div> </div></body> #header{ float: top; height: 100px; width: auto; background: orange;}#divLeft{ float: left; width: 100px; height: 100%; background: green;}#divMiddle{ height: 100%; width: auto; background: red;}#divRight{ float:right; width: 100px; height: 100%; background: blue;}
×
×
  • Create New...