1. Home
  2. Forums Index
  3. Browser Side / CSS 6:06 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

maximum width is not used

         

T_Ma

2:25 pm on Jan 9, 2008 (gmt 0)

10+ Year Member



I want to divide a web page into 2 equal width columns (actual width depends on the user's screen), and then there are boxes within the columns. The problem is, the width of the box depends on the content inside the box, instead of using the maximum width available. But setting width to 100% may make part of the content/ border disappeared.

Thank you for your advice!

code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {
background:#FF9999;
width: 100%;
padding: 0; margin: 0;
}

html {padding: 0; margin: 0;}

.width100 {
width: 100%;
float: left;
clear: both;
}

.bg_color {
background-color: #00CCFF;
height: 100%;
display: block;
clear: none;
float: left;
width: 100%;

}

.pad_add01{
padding: 20px;
float: left;
border: 2px solid #CCCCCC;
margin-right: 5px;
overflow: visible;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;

}

.width50_left {
width: 50%;
display: inline;
float: left;
background-color: #FFFF99;
text-align: justify;
vertical-align: top;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
overflow: hidden;
position: relative;
visibility: visible;
clear: right;
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 12px;

}

.width50_right {
width: 50%;
display: inline;
float: right;
background-color: #FFCC33;
text-align: justify;
vertical-align: top;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
overflow: hidden;
position: relative;
visibility: visible;
clear: right;
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 12px;
*width: 49.99%;

}

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="width100">
<div class="bg_color">

<div class="width50_left">
<div class="pad_add01">width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50
</div>
<div class="pad_add01">width50
</div>
</div>

<div class="width50_right">
<div class="pad_add01">width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50 width50
width50 width50 width50 width50 width50
</div>
<div class="pad_add01">width50
</div>
</div>

</div>
</div>
</body></html>

Xapti

5:28 pm on Jan 9, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't know exactly what you want, or what your problems are, but whatever you're doing is very messed up. There's a horde of unnecessary CSS declarations, and your approach is strange.
Is your problem the fact that some content can be too wide to fit in the 50% width boxes? If that's the problem, then you either have to give a desired overflow property (scroll, hidden, auto), or change to a fixed width design.
You should probably learn more about CSS before continuing design,

T_Ma

11:57 pm on Jan 9, 2008 (gmt 0)

10+ Year Member



Xapti: Thanks for your reply.

I have simplified the original code further to make the question clearer.

It's supposed to be a 100% width design.

If the user's screen is 800, then there will be 2 columns, each of 400. There will be boxes which contain some content within a column. Assume I need left and right margin surrounding the box, both 20. Then whether the content of the box is "abc" or a very long paragraph, I want the box's width to be
400-(20x2)=360.

Likewise, if the user's screen is 1280, then there will be 2 columns, each of 640. There will be boxes which contain some content within a column. Assume I need left and right margin surrounding the box, both 20. Then whether the content of the box is "abc" or a very long paragraph, I want the box's width to be
640-(20x2)=600.

Now the exact width of the box depends on how long the content is and has not fully occupied the width available, that's the problem. Initially the design is not strange, but to make all browsers happy (e.g. removing the scrollbar at bottom in 1 browser), I've made it increasingly strange:)

Thank you!

code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {
background:#FF9999;
width: 100%;
padding: 0; margin: 0;
}

html {padding: 0; margin: 0;}

.width100 {
width: 100%;
float: left;
clear: both;
}

.bg_color {
background-color: #9999CC;
height: 100%;
display: block;
clear: none;
float: left;
width: 100%;

}

.pad_add01{
padding: 20px;
float: left;
border: 2px solid #FF0000;
margin-right: 5px;
overflow: visible;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;

}

.width50_right {
width: 50%;
display: inline;
float: right;
background-color: #FFCC33;
text-align: justify;
vertical-align: top;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
overflow: hidden;
position: relative;
visibility: visible;
clear: right;
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 12px;
*width: 49.99%;

}

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="width100">
<div class="bg_color">

<div class="width50_right">
<div class="pad_add01">abc abc abc abc
</div>
</div>

</div>
</div>

</body></html>

SuzyUK

11:17 am on Jan 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



provided I'm understanding the question, remove the float and overflow rules from the 'inner' (padd_add01) div

.pad_add01{
padding: 20px;
/* float: left; */
border: 2px solid #FF0000;
margin-right: 5px;
/* overflow: visible; */
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
}

the float on that div, without a width is causing the content to be "shrinkwrapped", the overflow is not necessary. the floated outer divs are enough to halve the page with the inner providing your required padding and/or margin

T_Ma

1:52 am on Jan 11, 2008 (gmt 0)

10+ Year Member



Suzy: That's the problem I want to solve and after I change the code, it works now. Thanks for your help!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:06 am May 2, 2026