We help IT Professionals succeed at work.

Making a div expand horizontally to fill its container

John Carney
John Carney asked
on
How do I rewrite the CSS code below so that "topRight" expands to fill the rest of "container" completely to its right edge? This is frustrating me because even if  Also in "container", how do I condense the 4 four border codes  into one?

Thanks!
John

body {
	background-color: #FFFFFF;
	/*background-image: url(../cowBoomBar2.jpg);*/
	background-repeat: repeat-x;
	margin-top: 0px;
}
#container {
	margin: 0 auto;
	width: 880px;
	height: 700px;
	background-repeat: no-repeat;
	font-family: "Gill Sans MT";
	font-size: 14px;
	position: relative;
	background-image: url(../CowBoom1_greenHeader.jpg);
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	}
	
#mainBlock{
	height: 500px;
	color: #FF0000;
	font-family: "Gill Sans MT";
	background: #FFFFFF;
	margin-left: auto;
	padding: 0 0 0 10;
	width: 100%;
	float: left;
	margin-top: 138px;
	font-weight: bold;
        }
 
#topLeft {
	min-width: 200px;
	height: 380px;
	font-family: "Arial Black";
	font-size: 24px;
        margin-top: 30px
        margin-left: 0px;
	line-height: normal;
	width: 40%;
	color: #000000;
	font-weight: normal;
	float: left;
	padding-left: 40px;
	padding-top: 20px;
	margin-left: 0px;
	margin-top: 0px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;
        }
#topRight{
	margin: 42 10 0;
	width: 40%;
	height: 400px;
	float: left;
	color: #000000;
	font-family: "Gill Sans MT";
	top: 0px;
	line-height: normal;
	font-size: 12px;
	padding-right: 30px;
	padding-left: 30px;
	text-align: justify;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-top: 0px;
        }

Open in new window

Comment
Watch Question

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
John,

Set #topRight to 100% width to make it expand to fill a container.  If this isn't what you want, post the HTML as well so we can see how your divs are laid out.

Commented:
Try the following...
body {
	background-color: #FFFFFF;
	/*background-image: url(../cowBoomBar2.jpg);*/
	background-repeat: repeat-x;
	margin-top: 0px;
}
#container {
	margin: 0 auto;
	width: 880px;
	height: 700px;
	background-repeat: no-repeat;
	font-family: "Gill Sans MT";
	font-size: 14px;
	position: relative;
	background-image: url(../CowBoom1_greenHeader.jpg);
	border-width: 1px;
	border-style: solid;
	border-top-color: #000000;
	}
	
#mainBlock{
	height: 500px;
	color: #FF0000;
	font-family: "Gill Sans MT";
	background: #FFFFFF;
	margin-left: auto;
	padding: 0 0 0 10;
	width: 100%;
	float: left;
	margin-top: 138px;
	font-weight: bold;
        }
 
#topLeft {
	min-width: 200px;
	height: 380px;
	font-family: "Arial Black";
	font-size: 24px;
        margin-top: 30px
        margin-left: 0px;
	line-height: normal;
	width: 40%;
	color: #000000;
	font-weight: normal;
	float: left;
	padding-left: 40px;
	padding-top: 20px;
	margin-left: 0px;
	margin-top: 0px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;
        }
#topRight{
	margin: 42 10 0;
	width: 100%;
	height: 400px;
	float: left;
	color: #000000;
	font-family: "Gill Sans MT";
	top: 0px;
	line-height: normal;
	font-size: 12px;
	padding-right: 30px;
	padding-left: 30px;
	text-align: justify;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-top: 0px;
        }

Open in new window

Commented:
About the border codes, did you mean the width, style and color?

BORDER:1px SOLID #000000
Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
Hello John,

I get the impression that you want to have topleft and topright next to each other but so that left and right together take up 100% of the width?

These two floats have percentage widths which need to add up to 100%. You will also need to take off any left and right padding from topleft and topright because some browsers add padding onto width. You will need to put the padding on a div inside topleft and topright

Steggs

Explore More ContentExplore courses, solutions, and other research materials related to this topic.