DIV Layout - Mozilla Firefox

HTML & CSS
1

Hi guys,

I’m kind of new when it comes to working with CSS, but I am supposed to deliver a site project for school and I’m having a bit of an issue when it comes to the layout of the divs.
I have a maindiv which is supposed to contain 3 divs aligned side by side, menu on left, some writing in the middle, and photos on the right div.
However, my right seems to be aligning pretty weird, here’s a printscreen ( http://postimage.org/image/b1byg2vpz/ ) I have tried over and over again to fix the issue, but haven’t succeeded so far.

Here’s the CSS code:

#maindiv{z-index:1; position:absolute; top:-20; left: 20%; ; right: 20%; width:60%; height:100%; background-image: url('images/divback.jpg');  }
			
#header { margin: 0px auto; text-align:center; clear: both; padding: 0; position:absolute; left:0px; top:15px; margin-left:5%;}
			
#writing {padding: 15px;  border-left: 2px solid #4f4341; border-right: 2px solid #4f4341; top: 400px; width:28%; float:left; clear:both; }
			
#photos {padding: 15px;  float: right; top:0px; width: 10%;  float:left; clear: both; }

.bmenu li a{
	 display: block;
    color: transparent;
    text-transform: uppercase;
    text-shadow: 0px 0px 0.2px #251c1d;
	list-style: none;
    letter-spacing: 1px;
	list-style-type: none;
	position: relative;
	top:320px;
	width: 18%;
	padding: 5px 18px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	text-decoration: none;
	clear: both;
	float: left;
	 -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.bmenu:hover li a{
    text-shadow: 0px 0px 6px #251c1d;
	 list-style-type: none;
	 list-style: none;
	 -webkit-transform: skew(0deg);
    -moz-transform: skew(0deg);
    -o-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);
}
.bmenu li a:hover{
    color: #fff;
	background: transparent;
    text-shadow: 0px 0px 1px #251c1d;
    padding-left: 10px;
	 list-style-type: none;
	 list-style: none;
}

And the HTML:

<div id="maindiv">			
	<div class="bmenu">
	  the menu
	</div>
           <div id="writing" style="height:140%"> some writing </div>
           <div id="photos" style="height:140%"> photos </div>
</div>

I don’t know what I’m doing wrong in the CSS part, could someone please lend me a hand?

2

Looks like some floats needs to be cleared. Can you please provide a link to the working copy. That would be easy to debug.

3

If you need a link to the website, I can’t provide that since I haven’t uploaded anything. But I can upload a .rar archive with the css codes and this particular page.

4

Post the code. HTML + CSS

5

Didn’t I do that in my first post? I’m so sorry, I don’t mean to waste anyone’s time, I’m just confused.

Anyway, just in case, I’m posting them again. I have 2 css stylesheets, one for the menu, one for the rest, and the html. I hope this is what you need.



			
			#maindiv{z-index:1; position:absolute; top:-20; left: 20%; ; right: 20%; width:60%; height:150%; background-image: url('images/divback.jpg');  }

			#footer{  display: inline-block; clear: both; height: 5%; border-top: 1px solid white; padding: 0; margin: 0; background-color: black; }
			
			#header { margin: 0px auto; text-align:center; clear: both; padding: 0; position:absolute; left:0px; top:15px; margin-left:5%;}
			
			#afterheader {position: relative; height:4.3%; width: 100%; top: 300; border-top: 2px solid #4f4341; border-bottom: 2px solid #4f4341;background-image: url('wall1.jpg');}
			
			#writing {padding: 15px;  border-left: 2px solid #4f4341; border-right: 2px solid #4f4341; top: 400px; width:28%; float:left; clear:both; }
			
			#photos {padding: 15px;  float: right; top:0px; width: 10%; clear: both; }


.bmenu li a{
	 display: block;
    color: transparent;
    text-transform: uppercase;
    text-shadow: 0px 0px 0.2px #251c1d;
	list-style: none;
    letter-spacing: 1px;
	list-style-type: none;
	position: relative;
	top:320px;
	width: 18%;
	padding: 5px 18px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	text-decoration: none;
	clear: both;
	float: left;
	 -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.bmenu:hover li a{
    text-shadow: 0px 0px 6px #251c1d;
	 list-style-type: none;
	 list-style: none;
	 -webkit-transform: skew(0deg);
    -moz-transform: skew(0deg);
    -o-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);
}
.bmenu li a:hover{
    color: #fff;
	background: transparent;
    text-shadow: 0px 0px 1px #251c1d;
    padding-left: 10px;
	 list-style-type: none;
	 list-style: none;
}


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" href="menu4.css" type="text/css" />
		<link rel="stylesheet" href="background.css" type="text/css" />
		<link rel="stylesheet" href="header.css" type="text/css" />
		<title>China</title>		
	</head>
           <body>
	<div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;" >
		<img src="wall1.jpg" width="100%" height="100%">
	</div>
	<div class="outer">
		<div id="content"></div>
		<div id="before"></div>
		<div id="maindiv">
			<div id="header" align="center" class="move">
				<img src="images/header2.jpg" width="700px" height="210px" style="border:6px double #545565;"></img>
			</div>
			<div class="bmenu">
			<ul style="list-style-type: none;">
				here goes the menu
			</ul>
			</div>
			
			<div id="writing" style="height:140%"> <font face="calibri" color="#cfd9db" size="3"> the writing </div>
			<div id="photos" style="height:140%"> <font face="calibri" color="#cfd9db" size="3"> photos+writing </font></div>
		</div>
	</div>
	</body>
</html>
6

You’re trying to float them side by side, yes? WHy does the #photos, then, have clear:both on it? It’ll force it to slide under the float.

It’s still very hard to see what you meant. We don’t have images (and that’s mainly what your page is). A live link would be best, in the future :).

7

Yes, I was trying to float them side by side, but the #photos one will just begin from the middle of the other divs no matter what I do [deleting the clear: both didn’t help]. I don’t know how to put it, it doesn’t go right underneath the other two dives, it’s just not perfectly aligning with them. I really don’t know to explain it, I’m not even sure what words to use to describe this since English isn’t my native language and I’m also a newbie in terms of CSS.
Anyway, my project is due for tomorrow, so I just decided to use only 2 divs, the menu and the writing one, and inside the writing one I used tables when needed.
It would be nice to know what’s wrong with my original code though, I’m sure it could help me in the future.

8

Yes, just from that description, I have no clue what you want.

Good luck with your project grade.