Solved: HTML div problem

Status
This thread has been Locked and is not open to further replies. The original thread starter may use the Report button to request it be reopened but anyone else with a similar issue should start a New Thread. Watch our Welcome Guide to learn how to use this site.
G

Gesp

Thread Starter
Account Closed
Joined
Nov 29, 2008
Messages
270
Hi there

I have an html code of a wen site, and its organized all by div panels.

Well, my problem is that i can`t align the three top div panels in the master div (menu, side2, prime_text).

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project Java Sites</title>
<style type="text/css">
body {padding: 0; margin: 0; background-image:url(../images/BackgroundRepeat.png); background-repeat:repeat-x}
div#master { width:1024px; height: auto; margin:0 auto}
div#banner { width:1024px; height: 160px; background-image:url(../images/Background_01.png); margin:0 auto}
div#separate_bar1 { width: 1024px; height: 11px; background-image:url(../images/Background_02.png); margin:0 auto}
div#separate_bar2 { width: 236px; height: 23px; background-image:url(../images/Background_06.png)}
div#menu {width:236px; height:273px; background-image:url(../images/Background_03.png)}
div#side1 {width:236px; height: 334px; background-image:url(../images/Background_07.png); background-repeat:repeat-y; float:left}
div#side2 {width:249px; height: 630px; background-image:url(../images/Background_05.png); background-repeat:repeat-y; float:right}
div#prime_text {width:539px; height: 630px; background-image:url(../images/Background_04.png); background-repeat:repeat-y; float:right}
div#copyright { width: 1024px; height: 99px; background-image:url(../images/Background_08.png); float:left}
</style>
</head>
<body>
<div id="banner"></div>
<div id="separate_bar1"></div>
<div id="master">
    <div id="menu"></div>
    <div id="side2"></div>
    <div id="prime_text"></div>
    <div id="separate_bar2">&nbsp;</div>
    <div id="side1"></div>
 <div id="copyright"></div>
</div>
</body>
</html>
 
colinsp

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,382
Without the images it is difficult to see what problems you are receiving. Can you post a url so we can see what you are seeing? Without that it will be difficult to help. Try temporarily putting a 1px border round each div in a different colour to see if that helps with your positioning.
 
G

Gesp

Thread Starter
Account Closed
Joined
Nov 29, 2008
Messages
270
Here, i`ve changed the images for colors, the result is the same

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project Java Sites</title>
<style type="text/css">
body {padding: 0; margin: 0; background-image:url(../images/BackgroundRepeat.png); background-repeat:repeat-x}
div#master { width:1024px; height: auto; margin:0 auto}
div#banner { width:1024px; height: 160px; background-color:#00CC00; margin:0 auto}
div#separate_bar1 { width: 1024px; height: 11px; background-color:#FFFF00; margin:0 auto}
div#separate_bar2 { width: 236px; height: 23px; background-image:url(../images/Background_06.png)}
div#menu {width:236px; height:273px; background-color:#FF0000}
div#side1 {width:236px; height: 334px; background-color:#0000FF; background-repeat:repeat-y; float:left}
div#side2 {width:249px; height: 630px; background-color:#FF33CC; background-repeat:repeat-y; float:right}
div#prime_text {width:539px; height: 630px; background-color:#00FFFF; background-repeat:repeat-y; float:right}
div#copyright { width: 1024px; height: 99px; background-color:#666666; float:left}
</style>
</head>
<body>
<div id="banner"></div>
<div id="separate_bar1"></div>
<div id="master">
    <div id="menu"></div>
    <div id="side2"></div>
    <div id="prime_text"></div>
    <div id="separate_bar2">&nbsp;</div>
    <div id="side1"></div>
 <div id="copyright"></div>
</div>
</body>
</html>
 
colinsp

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,382
You need a containing div for your left most elements, I reordered some of the div's and removed some float's try this


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project Java Sites</title>
<style type="text/css">
body {padding: 0; margin: 0; background-image:url(../images/BackgroundRepeat.png); background-repeat:repeat-x}
div#master { width:1024px; height: auto; margin:0 auto}
div#banner { width:1024px; height: 160px; background-color:#00CC00; margin:0 auto}
div#separate_bar1 { width: 1024px; height: 11px; background-color:#FFFF00; margin:0 auto}
div#separate_bar2 { width: 236px; height: 23px; background-image:url(../images/Background_06.png); }
div#menu {width:236px; height:273px; background-color:#FF0000; }
div#side1 {width:236px; height: 334px; background-color:#0000FF; background-repeat:repeat-y;  }
div#side2 {width:249px; height: 630px; background-color:#FF33CC; background-repeat:repeat-y; float:left}
div#prime_text {width:538px; height: 630px; background-color:#00FFFF; background-repeat:repeat-y; float:left}
div#sidebar {width:236px; float:left;}
div#copyright { width: 1024px; height: 99px; background-color:#666666; float:left}
</style>
</head>
<body><div id="master">
<div id="banner"></div>
<div id="separate_bar1"></div>
<div id="sidebar">
        <div id="menu"></div>
	<div id="separate_bar2">&nbsp;</div>
	<div id="side1"></div>
	</div>
	<div id="prime_text"></div>
	<div id="side2"></div>
    <div id="copyright"></div>
</div>
</body>
</html>
 
G

Gesp

Thread Starter
Account Closed
Joined
Nov 29, 2008
Messages
270
Yah, that does it. I didn`t think on a solution grouping the three side elements of the page, but it fixes the problem really well.

Thanks ;)

this one´s solved
 
Status
This thread has been Locked and is not open to further replies. The original thread starter may use the Report button to request it be reopened but anyone else with a similar issue should start a New Thread. Watch our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Members online

Total: 345 (members: 4, guests: 341)
Top