Page 1 of 1
HTML help
Posted: Tue Nov 16, 2010 12:43 am
by Baseball435
Hey everyone. I am trying to make divs where they are a certain width(200) and height(500) and one is aligned n the left and the other on the right with a colored border so you can see it. But i cant get it to stay in its spot and i dont know how to edit the width and height of the div. And i cant get the divs on the same line so they are like...parallel. Its really annoying me because i know its so simple but i dont have much practice in html. I have the logo at the top, then the link div and then i want to have two panels parallel... i dont know how to explain how it looks. Kind of like forsaken sanctum with two panels on the sides and a link panel at the top and then in the center you have all of the php,text,etc but when i put something into the center it moves the two divs and i cant figure out how to make them stay in place. If you could help me out that would be great and if you need something more clear just ask. Thanks!
Re: HTML help
Posted: Tue Nov 16, 2010 2:30 am
by Jackolantern
The only part of this that is HTML is:
Code: Select all
<div id="one"></div>
<div id="two"></div>
The rest is CSS. I don't know if I am hitting everything you need, but maybe something like:
Code: Select all
#one {
float: left;
width: 200px;
height: 500px;
border: 2px solid #FF0000;
}
#two {
width: 200px;
height: 500px;
border: 2px solid #0000FF;
}
Re: HTML help
Posted: Tue Nov 16, 2010 2:37 am
by Baseball435
Okay thanks I'll try it! And yeah I was using CSS but the width and height thing didn't seem to be working
Re: HTML help
Posted: Tue Nov 16, 2010 3:30 pm
by Jackolantern
Where you using a unit prefix, such as "px", "em", etc?
Re: HTML help
Posted: Tue Nov 16, 2010 4:52 pm
by ConceptDestiny
You forgot the float:left for the second div.
HTML:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<body>
<div id="container">
<div id="one">left box</div>
<div id="two">right right box</div>
</div>
</body>
</html>
CSS:
Code: Select all
#container {
margin-left: auto;
margin-right: auto;
width: 404px;
height: 500px;
border: 1px solid #FF0000;
}
#one {
float: left;
width: 200px;
height: 500px;
border: 1px solid #FF0000;
}
#two {
width: 200px;
height: 500px;
border: 1px solid #0000FF;
float: left;
}
I've included a container div around them to make them more central. Hope this helps.
Re: HTML help
Posted: Tue Nov 16, 2010 8:16 pm
by Baseball435
Thanks so much i got it to work!
Re: HTML help
Posted: Tue Nov 16, 2010 8:17 pm
by ConceptDestiny
Baseball435 wrote:Thanks so much i got it to work!
Good luck with your project.
Re: HTML help
Posted: Tue Nov 16, 2010 9:24 pm
by Jackolantern
ConceptDestiny wrote:You forgot the float:left for the second div.
I thought he wanted them parallel? Having one floated to the left creates the parallel effect, since it allows the second to "wrap around" it to the right.
Re: HTML help
Posted: Tue Nov 16, 2010 11:57 pm
by Baseball435
thanks guys! the 2nd script was actually what i wanted. I figured out why my sessions werent working and i have started in developement of my game. I already have the map started and stats and all but now im working on houses!
Re: HTML help
Posted: Wed Nov 17, 2010 9:43 am
by ConceptDestiny
Jackolantern wrote:ConceptDestiny wrote:You forgot the float:left for the second div.
I thought he wanted them parallel? Having one floated to the left creates the parallel effect, since it allows the second to "wrap around" it to the right.
The div elements need to both contain the float left property in order for them to "wrap" around.