Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needed...DIVs.

    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. >_>

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Sep 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •