this has been annoying me all day, well i say all i mean a while, ive done it loads of times with absolute position and doing margins but that was just text,
now what i want to do is has two square divs side by side horizontally centered, with border of 1 and width/height of 150px
someone please help me i know it is simple i just cant think straight as im still grieving
There might be an easier way, but I came up with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
div#wrapper {
text-align: center;
}
div#container {
margin: 0 auto;
width: 316px;
}
div#one, div#two {
padding: 3px;
float: left;
width: 150px;
height: 150px;
border: 1px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="one">This is <div> one.</div>
<div id="two">This is <div> two.</div>
</div>
</div>
</body>
</html>
thank you very much paul i was almost there, how simple in the end, o well done now thanks again 
Originally posted by 96turnerri
thank you very much paul i was almost there, how simple in the end, o well done now thanks again
You're welcome, glad I could help.
Also, there might be an easier way where you don't have to next <div>'s three-deep. But since the two <div>'s are being floated left to get them side-by-side, I didn't really see any other way to get them to stay in the middle other than wrapping them in another div whose with is equal to the width+border+padding of the two center <div>'s.float the second div and your done, that wasnt too hard, now was it lol? confused y u r.That didn't seem to work...Oh yeah coz then they'd be on opposite sides of the page...
even tried it.
<!-- m --><a class="postlink" href="http://projep.t35.com/phptests/blah.htmlYou">http://projep.t35.com/phptests/blah.htmlYou</a><!-- m --> could do it without any wrapper div's, too:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
width: 150px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 50%;
margin-left: -150px;
}
#div2 {
width: 150px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 50%;
margin-right: -150px;
}
</style>
</head>
<body>
<div id="div1">One</div>
<div id="div2">Two</div>
</body>
</html>Now why didn't I think of that.. D'oh. Heh, I'm never the one who thinks of the best solution though.Depending on what it is needed for, the solution I listed above may not be the best one.
Absolutly positioned elements do not take up any space on the page, and that could definitly be a problem. I was simply throwing it out there to show it could be done.Just take the compliment, lol.ok thanks guys
omega yours didnt work at all one div was on left one was on right
paul yours looked fine but when u centered something above it the two divs wernt actually centered about 10px to right right
pyro spot onOriginally posted by 96turnerri
omega yours didnt work at all one div was on left one was on right
i already said it did that...so y post it then?i thought i would when i posted it but then i actually tried it.o ok thanks neway, please change ur sig takes more than 46 muscles to frownIt's just a joke, turneryes but for a joke to be funny, well to an intelect
anyway has to be accurateLOL... well, an INTELLIGENT person quotes Fred Durst as a JOKE ONLY... that guy surely can't be taken seriously.
JohnOriginally posted by Bigjohn
LOL... well, an INTELLIGENT person quotes Fred Durst as a JOKE ONLY... that guy surely can't be taken seriously.
John
THANKS. And let's not get into another limp bizkit debate. why are you talking about my sig anyways?Originally posted by 96turnerri
please change ur sig takes more than 46 muscles to frown this is why, neway tlk bout it some more on yahoo if you like, but getting back on topic, thanks for trying omegai think the topics closed lol.. the question is answered.
and just to let u know i got the 46 muscles thing from someone's away message.
now what i want to do is has two square divs side by side horizontally centered, with border of 1 and width/height of 150px
someone please help me i know it is simple i just cant think straight as im still grieving
There might be an easier way, but I came up with this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Example</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
div#wrapper {
text-align: center;
}
div#container {
margin: 0 auto;
width: 316px;
}
div#one, div#two {
padding: 3px;
float: left;
width: 150px;
height: 150px;
border: 1px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="one">This is <div> one.</div>
<div id="two">This is <div> two.</div>
</div>
</div>
</body>
</html>
thank you very much paul i was almost there, how simple in the end, o well done now thanks again Originally posted by 96turnerri thank you very much paul i was almost there, how simple in the end, o well done now thanks again You're welcome, glad I could help.
Also, there might be an easier way where you don't have to next <div>'s three-deep. But since the two <div>'s are being floated left to get them side-by-side, I didn't really see any other way to get them to stay in the middle other than wrapping them in another div whose with is equal to the width+border+padding of the two center <div>'s.float the second div and your done, that wasnt too hard, now was it lol? confused y u r.That didn't seem to work...Oh yeah coz then they'd be on opposite sides of the page...
even tried it.
<!-- m --><a class="postlink" href="http://projep.t35.com/phptests/blah.htmlYou">http://projep.t35.com/phptests/blah.htmlYou</a><!-- m --> could do it without any wrapper div's, too:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
width: 150px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 50%;
margin-left: -150px;
}
#div2 {
width: 150px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 50%;
margin-right: -150px;
}
</style>
</head>
<body>
<div id="div1">One</div>
<div id="div2">Two</div>
</body>
</html>Now why didn't I think of that.. D'oh. Heh, I'm never the one who thinks of the best solution though.Depending on what it is needed for, the solution I listed above may not be the best one.
Absolutly positioned elements do not take up any space on the page, and that could definitly be a problem. I was simply throwing it out there to show it could be done.Just take the compliment, lol.ok thanks guys
omega yours didnt work at all one div was on left one was on right
paul yours looked fine but when u centered something above it the two divs wernt actually centered about 10px to right right
pyro spot on
Originally posted by 96turnerri omega yours didnt work at all one div was on left one was on right
i already said it did that...so y post it then?i thought i would when i posted it but then i actually tried it.o ok thanks neway, please change ur sig takes more than 46 muscles to frownIt's just a joke, turneryes but for a joke to be funny, well to an intelect
anyway has to be accurateLOL... well, an INTELLIGENT person quotes Fred Durst as a JOKE ONLY... that guy surely can't be taken seriously.JohnOriginally posted by Bigjohn
LOL... well, an INTELLIGENT person quotes Fred Durst as a JOKE ONLY... that guy surely can't be taken seriously.
John
THANKS. And let's not get into another limp bizkit debate. why are you talking about my sig anyways?Originally posted by 96turnerri
please change ur sig takes more than 46 muscles to frown this is why, neway tlk bout it some more on yahoo if you like, but getting back on topic, thanks for trying omegai think the topics closed lol.. the question is answered.
and just to let u know i got the 46 muscles thing from someone's away message.