CODEWITHSUNDEEP
htmlcss
jessikwa
jessikwa

Reputation: 750

Min/Max width of div container with css

I've basically created a rough template of a grid so to speak. There's the top row, which runs all the way across, the second row, which has two columns, the third row, which has two columns, and the bottom row, which runs all the way across.

Right now everything is fixed at a certain size. What I want to do is make it so that if the user resizes their window the div containers will shrink to a minimum size, and also if they expand their window set a maximum size. Any suggestions are appreciated. Below is my code. Excuse the inline CSS, I don't normally code that way.

<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>

<body>

<div id="content-container" style="width:1500px; background:white;">

<div id="top-wrapper" style="width:100%; float:left; padding-bottom:50px; padding-top:50px; background:blue;">

<div id="top-strip" style="width:100%; text-align:center;"> 
<div id="toDesktopRecentTabs" style="float:left; width:20%;">Test</div>
<div id="toDesktopCustomize" style="float:left; width:20%;">Test</div>
<div id="toDesktopBuildingInventory" style="float:left; width:20%;">Test</div>
<div id="toDesktopDCStandards" style="float:left; width:20%;">Test</div>
<div id="toDesktopSupportingDocs" style="float:left; width:20%;">Test</div>
</div> 

</div>

<div id="row-container" style="float:left; width:100%; background:red;">

<div id="left" style="clear:left; float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:purple;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:green;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</div>

<br style="clear:both;" />
<br />

<div id="row-container" style="float:left; width:100%; background:red;">

<div id="left" style="float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:cyan;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:pink;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</div>

<div id="footer" style="clear:both; background:yellow; text-align:left; padding:20px;">
        Copyright © Site name, 20XX
</div>

</div>

</body>

</html>

Upvotes: 2

Views: 637

Answers (3)

Kelderic
Kelderic

Reputation: 6687

The best way to do this is to set everything to have width in %, and use the CSS properties max-width and min-width in px.

Step 1

You already have most of your values set in %, except for your padding and margin for your content blocks. So the first thing I've done is updated those to be in % as well. Second, you have given those content blocks a fixed height, which will need to be removed to prevent text from overflowing when the block gets more narrow, so I've removed that (Also abstracted the CSS):

http://jsfiddle.net/hYtH8/

Old CSS:

.left {
    float:left;
    width:45%;
    display:inline;
    height:150px;
    padding:20px;
    margin:0 20px 0 0;
}

.right {
    float:right;
    width:45%;
    display:inline; 
    height:150px;
    padding:20px;
    margin:0 0 0 20px;
}

New CSS:

.left {
    float:left;
    width:45%;
    display:inline;
    padding:2%;
    margin-left:1%;
}

.right {
    float:right;
    width:45%;
    display:inline; 
    padding:2%;
    margin-right:1%;
}

Step 2

Now that we have done that, we can change everything to a flexible model with fixed boundaries. We change the top container to have width:100% instead of width:1500px, and then give it a max-width and min-width.

http://jsfiddle.net/hYtH8/3/

Old CSS:

#content-container {
    width:1500px;
    background:white;
}

New CSS:

#content-container {
    width:100%;
    max-width:1500px;
    min-width:800px;
    background:white;
}

And success!

Extra

Couple notes. I noticed that you have duplicated ids throughout. #row-container and #left, for example. CSS only allows a single instance of ids, so we should switch these to classes. Additionally, you can float both content blocks to the left since you don't have any content in the middle. This will let you save some lines of code, and get rid of .left and .right entirely:

http://jsfiddle.net/hYtH8/5/

Old CSS:

#row-container {
    float:left;
    width:100%;
    background:red;
}

#left {
    float:left;
    width:45%;
    display:inline;
    padding:2%;
    margin-left:1%;
}

#right {
    float:right;
    width:45%;
    display:inline; 
    padding:2%;
    margin-right:1%;
}

New CSS:

.row-container {
    float:left;
    width:98%;
    background:red;
    padding:0 1%;
}

.row-container div {
    float:left;
    width:46%;
    display:inline;
    padding:2%;
}

Upvotes: 1

Matheus
Matheus

Reputation: 839

I've added two styles to the #content-container DIV, which are:

#content-div {
    max-width:800px; //this container wont be bigger than 800px
    min-width:500px; //and wont be smaller than 500px
}

DEMO

<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>

<body>
    <div id="content-container" style="max-width:800px; min-width:500px; background:white;">

    <div id="top-wrapper" style="width:100%; float:left; padding-bottom:50px; padding-top:50px; background:blue;">

    <div id="top-strip" style="width:100%; text-align:center;"> 
    <div id="toDesktopRecentTabs" style="float:left; width:20%;">Test</div>
    <div id="toDesktopCustomize" style="float:left; width:20%;">Test</div>
    <div id="toDesktopBuildingInventory" style="float:left; width:20%;">Test</div>
    <div id="toDesktopDCStandards" style="float:left; width:20%;">Test</div>
    <div id="toDesktopSupportingDocs" style="float:left; width:20%;">Test</div>
    </div> 

    </div>

    <div id="row-container" style="float:left; width:100%; background:red;">

    <div id="left" style="clear:left; float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:purple;">
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    <div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:green;">
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    </div>

    <br style="clear:both;" />
    <br />

    <div id="row-container" style="float:left; width:100%; background:red;">

    <div id="left" style="float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:cyan;">
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    <div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:pink;">
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    </div>

    <div id="footer" style="clear:both; background:yellow; text-align:left; padding:20px;">
            Copyright © Site name, 20XX
    </div>

    </div>
</body>

Upvotes: 1

Rachel9494
Rachel9494

Reputation: 824

Use the CSS "min-width" and "max-width" properties. You can set it as a %, a px, or even other measurements like cm.

Upvotes: 0

Related Questions