Div placement/putting elements together

  • Thanks to your help, I’ve got my wordpress layout finally looking how I hoped it would — the only thing left to tinker with is the div placement.

    https://obliviouslyyours.com/blog

    I’ve been following a tuturial from urbangiraffe.com and I used to have his initial design with the content and sidebar starting at the time time. However, when I was messing with my margins to make my content and sidebar divs fit with my background, I messed it up somewhere along the way. Now the sidebar begins after the content. The only thing I could think of would be changing the “get php” command’s position in the index, but then I could only reverse the situation — the content would start at the end of the sidebar. How can I get them to both start at the same place, please?

    And, additionally, how can I delete those horizontal rules that divide the different sections? I already have the seperate margins at zero and hr: display: none in style.css…but the dividers are still there.

    I apoolgize for asking such stupid questions; I know the answers must be very basic, but I’m new to PHP and though I’ve looked in the codex and other tutorials, I’m having trouble pinpointing exactly what I’m looking for there. I greatly appreciate your patience and all your advice.

Viewing 12 replies - 1 through 12 (of 12 total)

  • It seems you have fixed this, at least as far as I can see. Very unusual use of the fixed background. When you are done, consider submitting the site with an explanation to the Your WordPress review section on this forum.

    Think of html tags, divs, and classes as containers. They are all carefully stacked in place, and if you move one, the domino effect comes into play and everything shifts around.

    Also, while your site’s xhtml validates, you have some errors in your css. In particular, there is no float for “center”. Only right and left.

    Thread Starter excentriqua

    (@excentriqua)

    Hmm…I actually haven’t fixed it yet — as far as I can see on my browser. I did get my content to fit in my background, but I was really hoping to delete these lines seperating my elements. Does anyone else see the horizontal rules or, at least, the order of my sidebar and content? Is it an obvious coding error, or have I just copy and pasted something wrong?

    Oh, and thank you so much for the tip about there not being a center float, Lorelle! I will fix that right away.

    in your sourcecode :
    ‘<body>’

    ‘<div id=”page”>’
    ‘</div>’

    ‘<div id=”header”>’
    ‘<div id=”headerimg”>’
    ‘<h1>”‘</h1>’
    ‘<div class=”description”></div>’
    ‘</div>’
    ‘</div>’
    ‘<hr />’

    ??

    and OK your site is valid XHTML
    but you are using tables for Design !-this is not necessary…
    never ever ??

    Monika

    Thread Starter excentriqua

    (@excentriqua)

    Monika, thank you so much for responding! Lol, I actually don’t regularly use tables, so when I was copying things from tutorials I didn’t even recognize that hr code… Thanks, that saved me a lot of time! =)

    Okay, so that means there’s only one more thing I need to ask about before I’ve got a hand on things and can leave you guys in peace! It’s, again, the fact that my sidebar and content don’t begin at the same time. I’ve been following the tutorial from urbangiraffe.com and he says: “The reason we float anything is that a div is a block-level element. When a browser renders this it adds an automatic line break, putting the next element underneath. By floating the first element (the content) we prevent this happening, and the sidebar can then appear to its right, rather than underneath.”

    According to this it seems I need to float something for both the sidebar and content to begin simultaneously, but when I tried it had no effect. I think it’s because for my divs to fit into my background I had to use pixels instead of percentages, and it seems floats work best with broad terms. Is there another way to begin the sidebar and content at the same time besides the float option?

    Again, a million thanks for listening.

    Beginning “simultaneously” has nothing to do with the float. It’s because you have that huge “something” in your sidebar… and it takes time to download (even on my fast cable connection).

    Thread Starter excentriqua

    (@excentriqua)

    I’m sorry — I know it’s pretty likely that I am wrong here — but I think you are actually referring to my header. I have a very big image as my header right now because I don’t know how to merge smaller images together in a theme yet; obviously, I’m having enough trouble already with the basics!

    I’ve checked my different pages and I don’t think there is any code in my sidebar before the author tag (the first thing visable). I’m sorry, but could you please be a little more specific when referring to “that something”? It still looks to me as if the sidebar will not start until the content ends. I added another post to try and make it a bit more noticeable…if there was a hidden image in my sidebar, wouldn’t it stay the same size and the text, therefore, remain in the same spot? The top of it moved to align with the last post.

    So what you’re saying is that the sidebar actually appears BELOW all of the main column content, correct?

    If that’s the case, then it will definitely be a graphic or something that’s wider than the column in which it resides. Check graphics etc. in your sidebar to see if they are less than the number of pixels specified for the sidebar in the CSS.

    Thread Starter excentriqua

    (@excentriqua)

    Thank you , vkaryl. I have doublechecked my sidebar, index, and css files for graphics and limitation. In style.css I have a sidebar width of 176 pixels. I didn’t think I had any images exceeding that size in my sidebar, but just to make sure I completely wiped the sidebar of all but a single line of text that I’m positive is less than this. However, I am still seeing the sidebar line up underneath the content:

    https://obliviouslyyours.com/blog

    Is there some default PHP line in the index that would exceed 176 pixels? Again, I apologize for asking so many questions.

    OK, we are talking about different things. For me “simultaneously” means something together in time. And it wasn’t “in the same time” because you had that chat stuff in your sidebar, which made the sidebar to load very slow. On the other hand you obviously were using the word for a spatial reference. Plus, you never mentioned that you have this problem about the sidebar starting below the content in a browser called IE.
    Now I see the sidebar in the right place both in IE and FF, but you have other huge problems on the single post view (when you click on the title of a post).
    On the frontpage the site behaves quite differently in IE and FF, there is something related to the bg image.

    Thread Starter excentriqua

    (@excentriqua)

    Looking back I see I was a bit vague, and I’m sorry. I always forget about specifying which browser…yes, I use IE. And I am talking spatially and don’t want my sidebar to be below the content; I want the content and sidebar to be side-by-side, like, for example, this: https://www.jdijkstra.net/index.php

    If you look at my website now it’s a total mess, but I think it’ll be easier to see the structure of the layout. Currently, there’s a big, unmarked yellow header followed by the content posts, then the sidebar, and then the purple footer. As far as fitting in with my background, things are going great. The width of each div is perfect, and it’s aligned fabulously now that I got rid of the lone table tag. I know that when you click on a post and go to the comments section it’s messed up, but that’s okay–I’m not going to worry about that until later.

    I just want the sidebar to begin opposite of “Test”. There are currently no images in any element, so I don’t think that’s affecting the sidebar’s placement below the content. I before mentioned urbangiraffe.com’s suggestion of the float to do this, but it seems a lot of people disagree with it. Is there some PHP code I could use to achieve a side-by-side scheme, then? Any other suggestions?

    Thank you for your patience.

    Wrong page – sorry….

    your sidebar and your content need a div around them
    a box with two boxes in it

    sidebar and content margin-top:0px.
    I hope so you can try to figure it out
    Monika

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Div placement/putting elements together’ is closed to new replies.