Home/ Questions/Q 5945399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:40:34+00:00

In CSS 2.1, how can I put different divs next to each others? I

  • 0

In CSS 2.1, how can I put different divs next to each others? I found that there is a property float and values left, right, none and inherit and I guess they allow me to put for example picture A left and picture B right. But how can I put a picture B below picture A, or for example such that pictures are 15 pixels below the navigation bar of the site?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Even after editing the question, I’m still not 100% sure what you are after. You are mentioning two images and how they are positioned relative to one another but it sounds like the problem is really that they are overlapping another part of the page. Floating an element will allow you to position an element and have the rest of its parent’s content wrap around it, like a picture in a news article for example. You can also position divs side by side but that gets a little trickier.

    Originally, you mentioned wanting to position one image below another and have those two move together, in which case you would wrap the images in a div and then float the div however you wanted.

    In this updated question, it sounds like you would basically just want the images to appear below your page’s navigation bar. Without knowing the details, I assume the images are overlapping your page header because they are floated and they are siblings (at the same level in the DOM tree) with the navigation bar’s markup. You could do a couple things to fix that. First, you could give the images a margin-top value that’s equal to the height of the navigation bar. But that’s definitely a hack. Here’s a better approach…

    Without example HTML, it sounds like you really have two different parts of a page – a header/nav bar and the body of your page. If that’s the case, then I would use a div for each. The images would presumably be wrapped in the body’s div and no matter how you float them it within that body div, they shouldn’t ever overlap the header’s div. For example…

    <body>
    <div id="navigationHeader">
        <a href="http://www.google.com">Navigation Option 1</a>
        <a href="http://www.google.com">Navigation Option 2</a>
    </div>
    <div id="pageContent">
        <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" />
        Even though the image is floated left, it still won't overlap the page navigation header.
    </div>
</body>
    • 0