Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink
    Hi,

    I'm using wordpress to run my site but I seem to be having a css issue while designing. I tried posting on their support forums for assistance but no one was able to help. I was wondering if someone here might have an idea as to why these divs won't sit side by side. Here's the problem:

    http://ymlc.com/mge/

    The 3 columns aren't fitting inside #container. The 3 columns are #primary (left), #content (centre) and #secondary (right).

    The style for these is:

    #primary {
    width: 212px;
    padding: 0px;
    margin-top:0
    /*border: green 1px solid;*/
    }

    #content {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    width: 418px;
    /*border: yellow 1px solid;*/ }

    #secondary {
    width: 300px;
    margin-right; 10px;
    /*border: red 1px solid;*/
    }

    If I take out the width on the secondary it sits along side the other columns as it should. However it sits in a strange position as shown in the image below:

    http://3skimo.com/mg_rejig.jpg

    How can I make these columns sit neatly side by side?

    Any help would be greatly appreciated. I tearing my hair out trying to figure this one out.

    Many thanks.
    • CommentAuthordavist11
    • CommentTimeJul 21st 2009
     permalink
    Well #container isn't actually containing #primary or #secondary, it is a sibling instead of a parent. That would be the first place to start.
  2.  permalink
    Ah well that's me totally confused then. :) It's my first time working with wordpress and I'm finding deconstructing it a bit of a nightmare in terms of these three columns.

    The only appearances of #container :

    div#container {
    background: url('http://images.movie-gazette.com/wpimages/container_bg.jpg') repeat-y }

    This is the dark grey background for the left column.

    and...

    div#container,div#primary {
    /*margin-top:2em;*/
    }

    Which I removed.
    • CommentAuthordavist11
    • CommentTimeJul 21st 2009
     permalink
    div#container {
    float:left;
    width:100%;
    }


    So if that does not contain #primary and #secondary, how are you expecting them to all sit next to each other? You really are making this more complex than it needs to be.

    Just mark it up like this:

    <div id="container">
    <div id="primary">
    ...
    </div>
    <div id="content
    ...
    </div>
    <div id="secondary
    ...
    </div>
    </div>


    Then float them all and assign the appropriate widths to them.
  3.  permalink
    If I was marking this all up myself and designing from scratch that is what I would have done. However I'm having to use wordpress for this project and it's the first time I've ever tried to skin it. I've tried looking through the various templates and such but simply I'm just not sure how primary and secondary are being pulled in. However when I first begen skinning all the columns sat nicely together side by side. It was only when I began to change the widths of the columns that the 3rd one just wouldn't play ball. primary and content are as intended now. But if I take the width off of secondary it starts from the centre of the empty space (as shown in the jpg I posted above - http://3skimo.com/mg_rejig.jpg). With the width it's pushed down below the layout. I'm just looking and hoping for a CSS fix to this because frankly I wouldn't know where to begin with rewriting the templates from the wp admin.
    • CommentAuthordavist11
    • CommentTimeJul 21st 2009
     permalink
    The fact that it is WordPress should mean nothing. You can completely change the markup of the containing elements. I've provided you with a suggestion to fix the problem, so I guess that's as much help as I can give if you aren't going to take it.
  4.  permalink
    I'm sorry I'm not quite sure how I seem to have offended you but I was simply trying to explain my problem, there really is no reason for you to be rude. Like I explained above I don't understand how wp is pulling in those elements. That may mean nothing to you but it obviously is an issue for me. The reason I was posting here is because I wondered if there was I way I could fix this issue using just CSS and I've found some very kind and helpful people here in the past. I'm sorry I don't understand how to implement your suggested fix and I really wish I did. A polite "sorry I can't be more help but best of luck" really would have been enough.
Add your comments
    Username Password
  • Format comments as (Help)