Making a div expand horizontally to fill its container

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

LVL 1
gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
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

0
 
Jason C. LevineNo oneCommented:
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.
0
 
cb1393Commented:
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

0
 
cb1393Connect With a Mentor Commented:
About the border codes, did you mean the width, style and color?

BORDER:1px SOLID #000000
0
All Courses

From novice to tech pro — start learning today.