Support » Themes and Templates » CSS and Parent elements

  • 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>

Viewing 14 replies - 1 through 14 (of 14 total)
  • “links” and “music” have no relationship except for the fact that they are both child nodes of “sidebar”

    Thread Starter ethanator

    (@ethanator)

    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

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

    Thread Starter ethanator

    (@ethanator)

    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.

    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.

    Thread Starter ethanator

    (@ethanator)

    ok thanks let me try that and see what happens

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

    Thread Starter ethanator

    (@ethanator)

    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

    What do you mean, they didn’t work?

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

    Thread Starter ethanator

    (@ethanator)

    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

    No problem 🙂

    Thread Starter ethanator

    (@ethanator)

    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.

    Thread Starter ethanator

    (@ethanator)

    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

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘CSS and Parent elements’ is closed to new replies.