Fluid and Fixed problem

shedh · May 6, 2009

Well am just doing some psd to HTML conversions and i came across a little problem and am sure one of you can help

As you can see in the image i need the navigation and mainContent area to be of a fluid width and the sidebar of a fixed width, for some reason what ever i do i just can't get the sidebar to stick in that corner (BTW I've use float div's) but i just can't get it to align properly with the other two divs

thanks for the help in advance

shedh

POG1 · May 6, 2009

Re: Fluid and Fixed problem

Try not use min-width on the wrapper. What do you mean by "side bar to stick in the corner"?

Floydian · May 6, 2009

Re: Fluid and Fixed problem

Hey shedh, have you tried taking the nagivation and MainContent Area and putting them both into a div? Then you'd only have to deal with getting one div to position next to the sidebar.

My guess is, you're side bar needs to come first, with float: right; and width: 200px (or whatever unit)

And then the nagivation and MainContent Area container shouldn't need a width at all. It should situate right up to the left of the sidebar and take up the remaining 100% of the space.

Hope that helps...

POG1 · May 6, 2009

Re: Fluid and Fixed problem

Here is the basic markup structure you will need.

<div id="header">header(fluid)</div>

sideBar

</div>

navigation...

</div>

Main Content Area

</div>

</div>

As for the CSS you can try something like this..

div#wrapper{width:800px;border:3px solid red}div#header{font-size:24px;background:#ccc;color:#fff;padding:5px 0}div#header,.clear{clear:both}div#mainContent{float:left;background:green;clear:left}div#navigation{background:#fff}div#sideBar{float:right;width:200px;clear:right;background:#003}

I havent tested it but it will more or less produce what u posted in the image.

shedh · May 6, 2009

Re: Fluid and Fixed problem

Pog1 close, but not exactly what i wanted, the navigation and maincontent need to strecth out at all times so that its joint to the sidebar and i want those two to extend when the window gets bigger.

in this case i would try the usual width: 100% but then it has problems with the sidebar with the width at 200px

POG1 · May 6, 2009

Re: Fluid and Fixed problem

so you want it the width of the page? if so just remove the wrapper div

shedh · May 6, 2009

Re: Fluid and Fixed problem

lol no, the sidebar will always be 200px and then the maincontent area and navigation should be the only ones that are fluid so:

window width sidebar mainArea & navigation

800px 200px 600px

1000px 200px 800px

1200px 200px 1000px

the wrapper is there so it stops the window from shrinking to below 800px

get what i mean?

Uridium · May 7, 2009

Re: Fluid and Fixed problem

Maybe this will help you

<html>
<head>
<title>Example</title>
<style type="text/css">




div.header {
position: absolute;
top: 15px;
padding: 10px;
height: 50px;
width: 100%;
border: 1px dashed orange;
}
div.left {
padding: 10px;
position: absolute;
left: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.center {
padding: 10px;
position: absolute;
top: 100px;
left: 250px;
height: 500px;
width: 500px;
border: 1px dashed orange;
}
div.right {
padding: 10px;
position: absolute;
right: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.footer {
padding: 10px;
position: absolute;
right: 15px;
top: 660px;
height: 50px;
width: 100%;
margin: 20px;
padding: 10px;
border: 1px dashed orange;
}
</style>
</head>

<body>

<div class="header">
PLACE ALL YOUR CODING FOR THE HEADER HERE







</div>

<div class="left">
PLACE ALL YOUR CODING FOR THE LEFT HTML HERE
</div>

<div class="center">
PLACE ALL YOUR CENTERED SCREEN HTML HERE
</div>

<div class="right">
PLACE ALL YOUR RIGHT HTML HERE
</div>

<div class="footer">
PLACE ALL THE FOOTER HTML HERE
</div>

</body>
</html>

demo

http://www.freewebs.com/nightdreamer2000/divider.html

One of my very firsts hosts lol ah bless em they were crap but did me well lol

shedh · May 7, 2009

Re: Fluid and Fixed problem

again close but not near to what i want.

the left column is not needed, the center column is but it needs a fluid width with a min width and the right column needs to be 200px at all times

POG1 · May 9, 2009

Re: Fluid and Fixed problem

The example i showed you (minus the wrapper div) will do as you are asking. The default display value for a div is block meaning it will be as wide as the parent container.

Just try the code i posted

mikemastah · May 15, 2009

Re: Fluid and Fixed problem

I think what you're looking for is this. (right??)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>CSS</title>
   <style type=text/css>
   <!--
   body {
       height: 100%;
   }
   .wrapper {
       min-width: 800px;
       border: 1px solid black;
   }
   .header {
       height: 100px;
       margin-right: 200px;
       border: 1px solid black;
   }
   .navigation {
       margin-right: 200px;
       border: 1px solid black;
   }
   .main-content {
       margin-right: 200px;
       min-height: 280px;
       border: 1px solid black;
   }
   .sidebar {
       width: 200px;
       float: right;
       height: 400px
       border: 1px solid black;
   }
   -->
   </style>
</head>
<body>
   <div class="wrapper">
   <div class="sidebar">sidebar!</div>
   <div class="header">HEADER</div>
   <div class="navigation">nav1 nav2</div>
   <div class="main-content">test</div>
   </div>
</body>
</html>

just try it out.

Sign In

Fluid and Fixed problem

Recommended Posts

shedh

POG1

Floydian

POG1

shedh

POG1

shedh

Uridium

shedh

POG1

mikemastah

Join the conversation

Browse

Activity

Hosting