2 replies [Last post]
nightva
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-07
Posts: 4
Points: 0

Hi all,

I have a site that looks fine (the way I want it to) in IE6. BUT I want it to look good in FireFox, Opera, etc...you know. All the good browsers.

Right now I'm floating some elements inside their own containing block. In IE they are right next to each other. In FireFox the second box is lower than the first box. One floats to the left and the other floats to the right.

I know the floats are following the rules but can someone explain to me how to make them sit side by side with a width of 48% each?

Thanks.
Nathan

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 18 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Looks good in IE but needs help...

You'll probably have to provide some code to solve any problems.

Honestly, it sounds like a margin or padding problem.

nightva
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-07
Posts: 4
Points: 0

Looks good in IE but needs help...

Here is the entire section from containing block to internal divisions:

The two problems are...in FireFox the contentWrapper div extends all the way to the left side of the browser window and slides under the main navigation there. In IE the left side of the contentWrapper div butts against the right edge of the nav division.

Secondly, the news widget is pushed down by the weather widget in FireFox but are side by side in IE...

FireFox and Opera hate this.
IE 6 loves it...stupid browser.

#contentWrapper {
	clear:right; 
	width:99.5%; 
	margin-left:3px;}
#contentWrapper #centerPanel {
	height:220px;
	border:1px solid #333; 
	padding:5px;
	background:url("../assets/graphics/centerPanelBG1.jpg") top left repeat-x;}
#contentWrapper #centerPanel #utility {
	padding-top:10px; 
	float:left; 
	margin-right:20px;}
#contentWrapper #centerPanel #utility h4 {margin:2px;}
#contentWrapper #centerPanel #internalViewer {
	border-bottom:2px solid blue;
	border-right:2px solid blue;
	border-left:2px solid navy;
	border-top:2px solid navy;
	/*border: 2px solid blue;*/
	margin-top:12px;
	background-color:#FFF; 
	padding:3px;
	overflow:auto;
	width:auto; height:200px;}
#contentWrapper #rightSidePanel {
	border:1px solid #000; 
	margin-top:5px; 
	height:215px;}
#contentWrapper #rightSidePanel #externalViewerWindow h3 {
	text-align:center;
	margin:0;color:#000; 
	background-color:#CCCCCC}
#contentWrapper #rightSidePanel #externalViewerWindow {/*background-color:#F3E1A2;*/
	background-color:#333; 
	color:#FFF; 
	height:100%;}
#contentWrapper #rightSidePanel #externalViewerWindow p {padding-left: 5px;}

#pageContainer #footer {
	font-size:.8em;
	margin:1px;
	clear:left;
	padding-left:128px;
	padding-bottom:5px;}
	
/* BEGIN style rules for widgets */	
/* BEGIN weather widget */
#weatherWidget {
	border:1px solid #CCC; 
	width:49%; 
	height:176px; 
	float:left; 
	margin-top:2px;}
#weatherWidget h4 {
	padding-left:3px; 
	margin:0; 
	color:#000; 
	background-color:#66CCFF;}
#weatherWidget #weatherContent {
	overflow:auto;
	height:175px;}
#weatherWidget #weatherContent h5 {
	padding-left:15px; 
	margin-top:5px;
	 margin-bottom:3px; 
	 width:250px;}
#weatherWidget #weatherContent p {
	margin-top:5px; 
	margin-left:15px; 
	padding-left:15px; 
	font-size:.9em;
	padding-bottom:3px;
	padding-right:5px;}

/* BEGIN headlineswidget */
#headlinesWidget {
	border:1px solid #CCC;
	 width:49%; 
	 height:176px; 
	 float:right; 
	 margin-top:2px;}
#headlinesWidget h4 {
	color:#000; 
	background-color:#FF9900; 
	padding-left:3px; margin:0;}
#headlinesWidget #newsContent {
	overflow:auto; 
	height:175px;}
#headlinesWidget #newsContent h5 {
	padding-left:15px; 
	margin:0; 
	width:250px;}
#headlinesWidget #newsContent p {
	margin-left:14px; 
	font-size:.9em;
	margin-top:5px; 
	padding-bottom:3px; 
	padding-right:5px;}
.headlines {}
/* END style rules for widgets */