...

View Full Version : Help needed...DIVs.



Canon820
10-25-2004, 05:49 PM
Ok, I am switching my layout from a table based one to a DIV and CSS based one. However, I don't know how to make two DIVs appear next to each other, one should have a width of 57% and the other a width of 8.5% but I cannot make them line up next to each other and I am cunfuzzled.

This is a breif part of the code:

<div class="d3">
Most Recent News
</div>
<div class="d4">
Navigation Menu
</div>

And from the CSS:
.d3 { background: #0b151d; text-align: center; height: 25px; width: 57%; font-weight: bold; margin: auto; border: 1px solid #000000; }
.d4 { background: #0b151d; text-align: center; height: 25px; width: 8.5%; font-weight: bold; margin: auto; border: 1px solid #000000; }

Any help is appreciated, I'm not good with DIVs and am having a great del of trouble as it is. >_>

chilipie
10-25-2004, 05:55 PM
Apply float: left; to one and float: right; to the other or put them inside a container and apply float: left; to both of them.

And could you put the code in [ code ] tags next time you post, as it is easier to read.

Canon820
10-25-2004, 06:46 PM
Thanx for the help, I did apply it but i seemed to have opened up some new problems.

I'll try to do this:

This is the page that I originally had that looked good (but with tables):
http://osiris.atspace.com/test/test2.html
This is the CSS for that:
http://osiris.atspace.com/test/style2.css

Now, this is the page that I was experimenting with DIVs on and made plenty of mistakes, I guess:
http://osiris.atspace.com/test/index.html
And here is the CSS for that one:
http://osiris.atspace.com/test/style.css

Now I realize most of you are quite busy but as you can probably see, I am a failure at this. So if anyone could tell me how to do it, or start it for me and tell me how to do it. I was really alright until I had to lign the two divs up next to each other then the whole thing kind of blew up.

Thanx for any help.

Sayonara
10-26-2004, 09:36 AM
You have to understand that the div is just a generic container - it doesn't know what you want it to do, so unless you specify positioning attributes each browser will display them using inheritance or their own defaults (whichever applies for the div in question).

It's all very well giving it (literal) style attributes such as border and text alignment, but you also need to tell it how to display - both with respect to the page, and with respect to the surrounding elements.

Positioning with CSS gives people real nightmares at first, because it doesn't seem to have much logic, so it's best to bite the bullet and go straight to the W3C spec for CSS:
http://www.w3c.org/TR/CSS21/

There are plenty of very good tutorials by example for CSS. Virtually anything you will try and do has been done before, so you can always get hold of example code.

Try http://www.alistapart.com/topics/css/ for CSS design ideas.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum