HTML help

Baseball435 · Post by **Baseball435** » Tue Nov 16, 2010 12:43 am

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!

Post by **Jackolantern** » Tue Nov 16, 2010 2:30 am

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;
}

Baseball435 · Post by **Baseball435** » Tue Nov 16, 2010 2:37 am

Okay thanks I'll try it! And yeah I was using CSS but the width and height thing didn't seem to be working

Post by **Jackolantern** » Tue Nov 16, 2010 3:30 pm

Where you using a unit prefix, such as "px", "em", etc?

ConceptDestiny · Post by **ConceptDestiny** » Tue Nov 16, 2010 4:52 pm

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.

Baseball435 · Post by **Baseball435** » Tue Nov 16, 2010 8:16 pm

Thanks so much i got it to work!

ConceptDestiny · Post by **ConceptDestiny** » Tue Nov 16, 2010 8:17 pm

Baseball435 wrote:Thanks so much i got it to work!

Good luck with your project.

Post by **Jackolantern** » Tue Nov 16, 2010 9:24 pm

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.

Baseball435 · Post by **Baseball435** » Tue Nov 16, 2010 11:57 pm

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!

ConceptDestiny · Post by **ConceptDestiny** » Wed Nov 17, 2010 9:43 am

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.

HTML help

HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help

Re: HTML help