Css DIVS Not Working

Question

1.00/5 (1 vote)

See more:

Okay Here is my Problem I Have a row with 2 DIVS(They Work Fine), and the second row with 5 DIVS (that do not work fine). The issue is Basically I can get it to work with either IE or Firefox the main issue is with the 5th DIV on the second row.. i want them to all align like 12345 in a row and when the browser gets bigger or smaller i want them to stay this way but what happens is the 5th DIV will either go to the next line or it will go over the first div on the second row.. HELP with be GREATLY Appreciated... Heres my code

HTML

HTML

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="index.css">
	<!-- saved from url=(0016)http://localhost -->
</head>
<body>
	<div id="container">
		<div id="table1"></div>
		<div id="table2"></div>
	</div>
	<div id="container2">
		<div id="table3">1</div>
		<div id="table4">2</div>
		<div id="table5">3</div>
		<div id="table6">4</div>
		<div id="table7">5</div>
</div>
</body>
</html>

CSS:

<pre lang="CSS">

div {
	display: block;
}
body {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: #121633;
	color: red;
	font-family: "Arial";
	font-size: 12px;
}
#container {
	width: 100%;
	display: inline-block;
	background-color: #404040;
}
#table1 {
	width: 5%;
	height: 100px;
	float: left;
}
#table2 {
	width: 95%;
	height: 100px;
	float: left;
	text-align: center;
}
#container2 {
	width: 100%;
	display: inline-block;
	color: #FFFFFF;
	font-family: "Arial";
	font-size: 12px;
}
#table3 {
	float: left;
	width: 5%;
	height: 48px;
}
#table4 {
	float: left;
	width: 5%;
	height: 48px;
}
#table5 {
	float: left;
	width: 50%;
	height: 48px;
}
#table6 {
	float: left;
	width: 20%;
	height: 48px;
}
#table7 {
	float: left;
	width: 20%;
	height: 48px;
}

Posted 24-Aug-15 6:58am

Member 11931973

Add a Solution

Comments

Richard Deeming 24-Aug-15 13:45pm

Your CSS works fine for me in Firefox and IE11:
https://jsfiddle.net/1no30z52/[^]

j snooze 24-Aug-15 17:55pm

You should take a look at the bootstrap css(http://getbootstrap.com/css/) maybe its too much for what you are trying to do, but all you need to do is create a div with a class of "row" and it will align the divs inside that horizontally without having to fight the wonderful "float" style. Great way to learn some new css too.(at least I learned alot from it.)

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jgakenhe · Answer 1 · 2015-08-24T18:11:00

It looks like your problem is with IE7. I tested with IE7->10, FF, and Chrome and only 7 looked different.

How to fix? Sometimes browsers complain when your numbers add up to 100% or 50% if you are splitting your page in half. It appears that IE 7 is complaining the page is too tight and is pushing div table7 to the next line because it is too tight. So, I changed the 20% to 19% for #table7 CSS and it seems to fix the problem and look correct in the other browsers mentioned.

C#

#table7 {
    float: left;
    width: 19%;
    height: 48px;
}

Karthik Devaraj · Answer 2 · 2015-08-24T18:10:00

Solution 4

Try to add

CSS

*{margin:0; padding:0;}

in top of the css line and check the same :)

Posted 24-Aug-15 18:10pm

Karthik Devaraj

Css DIVS Not Working

2 solutions

Solution 5

Solution 4

Add your solution here

Preview 0

Css DIVS Not Working

2 solutions

Solution 5

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us