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.

Fluid and Fixed problem

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation