WordPress.org

Ready to get started?Download WordPress

Forums

CSS and Parent elements (15 posts)

  1. ethanator
    Member
    Posted 8 years ago #

    i am trying to do some layout in css but i am confused about parent elements.

    if i have tihs is links the parent to music if not explain what is thanks

    <div="sidebar">
    <div="links">
    (list of link)
    </div>
    <div="music">
    (list of music)
    </div>
    </div>

  2. skulled
    Member
    Posted 8 years ago #

    "links" and "music" have no relationship except for the fact that they are both child nodes of "sidebar"

  3. ethanator
    Member
    Posted 8 years ago #

    ok so say i want t get them to be next to each other instead of one under the other i was going to use float : left which takes it an makes it left of its parent element

    i am trying to have my sidebar be on the bottom thanks

  4. skulled
    Member
    Posted 8 years ago #

    "i was going to use float : left which takes it an makes it left of its parent element" .. what do you mean by this?

    if you give a float: left for the "links", then it will float left relative to the parent which is "sidebar", and then you can accordingly position the other container "music" in a number of ways.

  5. ethanator
    Member
    Posted 8 years ago #

    ok in what ways? what i dont understand is that i can i float it left of the sidebar when the sidebar really isnt a physical element it just has all the coantainers in it.

    could i also use right : 25px in CSS

    i need to figure out how to have 4 columns in the sidebar container and then have them be next to each other. I am not sure how to make this work.

  6. skulled
    Member
    Posted 8 years ago #

    your sidebar still is a container (physical if you wish), sort of like a "meta" container if you want.

    You can do what you explained in one way, put all the four columns that you want inside the "sidebar" container. Then starting with the first child container, use:

    position: absolute;
    left: (width of the previous child container);

    or you could try this too:

    position: relative;
    margin-left: (width of previous child container);

    If you are having trouble, let me know and I will see whats wrong. But please provide the code that you are using if you implement it and there is trouble somewhere, or a link to where we can see it in action.

  7. ethanator
    Member
    Posted 8 years ago #

    ok thanks let me try that and see what happens

  8. Yngwin
    Member
    Posted 8 years ago #

    A pretty good explanation of floats can be found at http://www.complexspiral.com/publications/containing-floats/

  9. ethanator
    Member
    Posted 8 years ago #

    you say when I use float: left there are a number of ways to position it. What are those ways. I tried margins and they didnt work

  10. skulled
    Member
    Posted 8 years ago #

    What do you mean, they didn't work?

    Can you please give more information on what exactly is happening and how it is rendering.

  11. ethanator
    Member
    Posted 8 years ago #

    margins worked with float but i decided to go with the
    position: absolute;
    left: (width of the previous child container);

    thanks for everything you have been a great help

  12. skulled
    Member
    Posted 8 years ago #

    No problem :)

  13. ethanator
    Member
    Posted 8 years ago #

    i have a problem with aligning items. i am doing a bottom sidebar with 4 columns and above it there is a custom navigation bar that it needs to staye line up with so i am able to spread everything out by use the right property and setting how many px i want it ti be right. but when i make the browser window smaller the columns doesnt stay aligned w the nav buttons they move please help.

  14. ethanator
    Member
    Posted 8 years ago #

    i am working on a bottom sidebar and have 4 columns. i am using the following to display this.

    <div id=recent">
    <?php get_archives('postbypost','10','custom','

    ','
    '); ?>
    </div>
    but there is about 30 px of whitespace that isnt supposed to be there and is throwing off my design the css for this is the following

    #recent {
    float: left;
    }

    i have tried using the right property for the next element but that doesnt work either because if i make then browser window smaller it doesnt line up properly with the rest of the design thanks

  15. skulled
    Member
    Posted 8 years ago #

    Once again .. its very hard to visualize what is happening and what is wrong without actually seeing it .. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.