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
John CarneyReliability Business Tools Analyst IIAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
cb1393Commented:
About the border codes, did you mean the width, style and color?

BORDER:1px SOLID #000000
0
Mark StegglesWeb 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.