Web Design Forums

M@t · 03-06-2005, 11:44

Hello (again)

I’ve been looking at loads of different CSS tutorials, but I cant work out how to put boxes next to each other and have it all centred.

http://www.matt-prince.co.uk/upload/

That’s what I’ve done so far.

This might help explain what I am trying to do.

http://www.matt-prince.co.uk/upload/layout.jpg

Can anyone helpme with this?

Cborrow · 03-06-2005, 13:24

Well, if you want boxes next to each other and all of them being center, first use a container div with the other divs inside with float: left and float: right. Below is an example

Code:

<html>
<head>
<style type="text/css"><!--
#container {
width: 800px;
height: 400px;
}
#left {
width: 350px;
height: 390px;
float: left;
}
#right {
width: 350px;
height: 390px;
float: right;
}
--></style>
</head>

<body>
<div id="container">
<div id="left">
<p>
Content for left box
</p>
</div>
<div id="right">
<p>
Content for right box
</p>
</div>
</div>
</body>

</html>

M@t · 03-06-2005, 14:16

How can i make that all centered?

Cborrow · 03-06-2005, 14:51

Just try adding a position: relative to the #container or using margins, like margin-top: 100px; margin-left: 150px;.

M@t · 04-06-2005, 11:00

thanks!! got it to work!! yay, am so happy now, it was anoying me.

M@t · 05-06-2005, 12:47

ok, I’ve got another problem that i hope you can help me with.

http://www.matt-prince.co.uk/test/shiowTest.htm

how can i get this to work properly, when you click more, more text should appear, then when you click more again it should go back to how it was originally. but it doesn’t always do this.

how can i fix this?

Cborrow · 05-06-2005, 14:29

Well, on this computer it all seems to work fine. Ill check it a little more when I get home.

M@t · 05-06-2005, 16:09

I juist tryed it again, it work ok in IE (just the text is a little out of line, but i can fix that)

In FF if you clcik the middle "more" it show the text, then click t again to hide the text and the bottom section dosent move back. (hopfully you get what am trying say)

Cborrow · 05-06-2005, 18:09

Yep, I just got home I and see what you are saying I opened firefox and it was a little weird, ill see what I can do, hopefully I can fix it.

Limbo · 06-06-2005, 08:15

Have a look at this tutorial from evolt - It's pretty solid

http://www.evolt.org/article/Collaps.../?format=print

weldo · 06-06-2005, 08:24

Quote:

Originally Posted by Cborrow

Just try adding a position: relative to the #container or using margins, like margin-top: 100px; margin-left: 150px;.

That won't quite center everything.
You'll probably need to use:
margin-left: auto;
margin-right:auto; and maybe even
text-align: justified;

to be sure

emil · 06-06-2005, 09:18

That is odd. In the first example I gave you everything seemed to work fine

I played with the code some more, and it still works fine,
http://randomcolors.com/uploads/dt/showhide/mat2.html
well almost

( The code is a mess, I know, but you get the
point)

My guess is your problem has to do with the images you
inserted as dividers in the code

Quote:

try removing those and adding them with css.
It's just a guess, I dunno

03-06-2005, 11:44	#1 (permalink)
M@t Live Forever Join Date: Dec 2004 Location: Winchester, UK Posts: 35	Help with CSS Hello (again) I’ve been looking at loads of different CSS tutorials, but I cant work out how to put boxes next to each other and have it all centred. http://www.matt-prince.co.uk/upload/ That’s what I’ve done so far. This might help explain what I am trying to do. http://www.matt-prince.co.uk/upload/layout.jpg Can anyone helpme with this?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

03-06-2005, 14:16	#3 (permalink)
M@t Live Forever Join Date: Dec 2004 Location: Winchester, UK Posts: 35	How can i make that all centered?

03-06-2005, 14:51	#4 (permalink)
Cborrow I like code. Join Date: Dec 2004 Location: Chesapeake, VA Posts: 215	Just try adding a position: relative to the #container or using margins, like margin-top: 100px; margin-left: 150px;.

04-06-2005, 11:00	#5 (permalink)
M@t Live Forever Join Date: Dec 2004 Location: Winchester, UK Posts: 35	thanks!! got it to work!! yay, am so happy now, it was anoying me.

05-06-2005, 12:47	#6 (permalink)
M@t Live Forever Join Date: Dec 2004 Location: Winchester, UK Posts: 35	ok, I’ve got another problem that i hope you can help me with. http://www.matt-prince.co.uk/test/shiowTest.htm how can i get this to work properly, when you click more, more text should appear, then when you click more again it should go back to how it was originally. but it doesn’t always do this. how can i fix this?

05-06-2005, 14:29	#7 (permalink)
Cborrow I like code. Join Date: Dec 2004 Location: Chesapeake, VA Posts: 215	Well, on this computer it all seems to work fine. Ill check it a little more when I get home.

05-06-2005, 16:09	#8 (permalink)
M@t Live Forever Join Date: Dec 2004 Location: Winchester, UK Posts: 35	I juist tryed it again, it work ok in IE (just the text is a little out of line, but i can fix that) In FF if you clcik the middle "more" it show the text, then click t again to hide the text and the bottom section dosent move back. (hopfully you get what am trying say)

05-06-2005, 18:09	#9 (permalink)
Cborrow I like code. Join Date: Dec 2004 Location: Chesapeake, VA Posts: 215	Yep, I just got home I and see what you are saying I opened firefox and it was a little weird, ill see what I can do, hopefully I can fix it.

06-06-2005, 08:15	#10 (permalink)
Limbo Baskin' Join Date: Feb 2005 Posts: 5,227	Have a look at this tutorial from evolt - It's pretty solid http://www.evolt.org/article/Collaps.../?format=print

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)