CODEWITHSUNDEEP
htmlcsslayoutpositioningfixed
Waldo Frank
Waldo Frank

Reputation: 65

How do I get a FIXED div to hold it's space?

I am trying to create a layout with fixed menus on both the upper-right and upper-left-hand corners (both have a width of 50px), and a 900px wide content area in the middle (not difficult). However, when the user re-sizes their browser window, I want all DIV elements to hold their width - in other words I don't want any DIVs to go under or over any other DIVs. I want the browser window to force a horizontal scroll bar when it gets smaller than 1000px (the combined width of the elements on the page).

Here is what I've got so far, obviously it isn't correct: http://linomeoli.com/test

Here is the code:

<style type="text/css">

div#sideleft {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    left:20px;
}

div#sideright {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    right:20px;
}

div#middle {
    width:900px;
    margin:auto;
}

</style>

<body>

<div id="sideleft">
This shit<br />
that shit<br />
</div>

<div id="middle">
<img src="http://dispose.co/images/dulla_01.jpg" />
<img src="http://dispose.co/images/dulla_02.jpg" />
<img src="http://dispose.co/images/dulla_03.jpg" />
<img src="http://dispose.co/images/dulla_04.jpg" />
<img src="http://dispose.co/images/dulla_05.jpg" />
<img src="http://dispose.co/images/dulla_06.jpg" />
</div>

<div id="sideright">
previous<br />
next<br />
and whatever
</div>


</body>

I know this has got to be a pretty simple task; however, I'm stuck! I promise, I've spent a good amount of time attempting to solve this before soliciting help. Any help would be greatly appreciated.

Thanks

Upvotes: 0

Views: 2891

Answers (2)

Faizan
Faizan

Reputation: 1

I was going through the similar problem where I needed to create a fixed div but it should take the required space and shouldn't overlap the content. I figured a way to make it possible easily although you may need to write more code. Here is how you can do it:

  • Create 2 divs for each unit use one div to acquire the required space and another to show the content. Basically overlap the div that takes up the space for you with the div you intend to display.

Hope this helps.

Upvotes: 0

user1978550
user1978550

Reputation:

If you get rid of the fixed positioning and float all of the divs to the left, they won't pile on top of each other. Then you can either make your middle div the width you want them to be apart or create another div to wrap around that middle div and make it the width you want them to be apart. You can even make the width a percentage so that it will change for different screen sizes. If you want that right one to be all the way to the right for sure no matter how much space is between the right and middle div, you just float that one to the right.

Upvotes: 0

Related Questions