Min Width on floating Columns (HTML\CSS)

Question

i need your assistance. I am using the below design, but want to set it so that at a set size the columns will no long compress\shrink. I have tried setting "min-width", but just cant get it to work. Please help.

http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm

Thanks in advance,

Edit: Code added.

<!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-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}


#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}

/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">

<div id="header">
HEADER CONTENT  
</div>
<div id="container4">
<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">
                <!-- Column one start -->
                <h2>Equal height columns</h2>
                <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
                                    <!-- Column one end -->
            </div>
            <div id="col2">
                <!-- Column two start -->
                <h2>No Images</h2>
                <p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
                <!-- Column two end -->
            </div>
            <div id="col3">
                <!-- Column three start -->
                <h2>Valid XHTML strict markup</h2>
                <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
                <!-- Column three end -->
            </div>
            <div id="col4">
                <!-- Column four start -->
                <h2>Cross-Browser Compatible</h2>
                <p>This 4 column layout has been tested on the following browsers:</p>

                <!-- Column four end -->
            </div>
        </div>
    </div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>


</body>

instead of posting a link to an external site, could you please extract and post only the relevant code? — PA., Jul 10 '14 at 10:05
Thinking about it, if its easier to start from stratch, how could a create a page with a header section, then 4 columns that will grow to fit the page width, but never shrink below a set size, then a footer section. This needs to be done with a combination of html\css — Stuart Smith, Jul 10 '14 at 10:08
grab some html css tutorial, try something and come back with a more concrete question. — PA., Jul 10 '14 at 10:10
The stripped down code is below (hopefully its ok to post code here) and just want to set a min-width to each column, but whatever i try wont work. — Stuart Smith, Jul 10 '14 at 10:15

score 0 · Accepted Answer · answered Jul 10 '14 at 10:50

0

Would be interestin waht you tried to see where your error is. When i add the background colors and min-width to col1, ... it works for me:

#col1 {
    background: none repeat scroll 0 0 blue;
    float: left;
    left: 77%;
    min-width: 200px;
    overflow: hidden;
    position: relative;
    width: 21%;
}

answered Jul 10 '14 at 10:50

jungerislaender

304
1
12

odd, if you see the min-width to a px value, it works, but if you set it to a % value, it doesnt. Atleast the issue it fixed. Tha said, is there anyway to stop the columns dropping down below the next column as the window shrinks? oh yer, thanks. – Stuart Smith Jul 10 '14 at 11:23

Min Width on floating Columns (HTML\CSS)

1 Answers1