CODEWITHSUNDEEP
cssfluid-layout
Andy Dwyer
Andy Dwyer

Reputation: 716

CSS fluid two column and min-width

I have a two-column fluid layout, with the left-hand side set to width: 40% and the right-hide side set to width: 60%. I'd like to allow users to resize their browser as large or small as they'd like, but I must have the left-hand side display a minimum width of 300px.

The following is the code I am currently using for the fluid layout, which includes the min-width specification. But, CSS is ignoring it! It allows the left-hand column to shrink below 300px.

I've also attempted to set min-width to a percentage, such as 20%, but CSS ignores this specification as well.

div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0; 
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}

div#right {
background: #aaa;
position: fixed;
top: 0; 
width:60%;
right: 0;
bottom: 0;
}
​

jsFiddle Fullscreen Example: http://jsfiddle.net/umgvR/3/embedded/result/

jsFiddle Code: http://jsfiddle.net/umgvR/3/

What is causing this? How can the code be corrected?

Upvotes: 4

Views: 5701

Answers (3)

lukeocom
lukeocom

Reputation: 3243

This should also work...

html

<div id="container">
        <div id="left">Left</div>
        <div id="right">Right</div>
</div>

css

body, div {width:100%;
                height:100%;
                margin: 0;
            }

            #container {
                display:block;position: fixed;
            }
            #left, #right {
                display: inline-block;
            }
            div#left {
                background: #ccc;
                min-width: 300px;
                max-width: 40%;
            }

            div#right {position:fixed;
                background: #aaa;
                width: 60%;
            }

Upvotes: 1

jamesplease
jamesplease

Reputation: 12869

If you're not too attached to the fixed positioning, this should do what you want.

View on JSFiddle

HTML

<div id="left">Left</div><div id="right">Right</div>

Note the lack of whitespace between the elements

CSS

html, body {
  height: 100%;
}
body {
  min-width: 800px;
}
div#left {
  background: #ccc;
  display: inline-block;
  width: 40%;
  min-width:300px;
  height: 100%;
}

div#right {
  background: #aaa;
  display: inline-block;
  width:60%;
  height: 100%;
}

Upvotes: 1

Impulss
Impulss

Reputation: 271

I found out that the left hand div is keeping the minimum width, but its going underneath the right div. If you bring it forward, you can see it on top of the right div. I don't think that this is ideal though. 

 z-index: 1;

I used z-index: 1; on the left right and z-index: 0; on the right div.

It works but I think there are better solutions out there.

Upvotes: 0

Related Questions