How to put some divs in a row?

Question

I'm trying to put two divs without a linebreak between them.

this is the html:

        <div id="header">
            <div id="logo"></div>

            <div id="left">
                <div id="slideshow"></div>
            </div>

        </div>

and this is the CSS:

    #header {
    background-color: #13768a;
    width: 962px;
    height: 207px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}


#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    }

    #left {
    width:712px;
    height: 207px;
}

#slideshow {
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}

the problem is that I want it to look like this: How I want it to look like

But it looks like this: How it looks like

Solution 1

Introduce a float CSS property. Change CSS as below, for #logo and #left.

#logo {
  background-image:url('logo.png');
  height: 207px;
  width: 250px;
  margin-right: 0px;
  padding: 0px;
  float:right;
}

#left {
  width:712px;
  height: 207px;
  float:left;
}

---

From the MDN Documentation,

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

Solution 2

This is controlled by the display style property. Normally, div elements use display: block. You can use display: inline or display: inline-block instead if you want them on the same horizontal line.

Example using inline-block (live copy | source):

CSS:

.ib {
  display: inline-block;
  border: 1px solid #ccc;
}

HTML:

<div class="ib">Div #1</div>
<div class="ib">Div #2</div>

Solution 3

Div elements normally use display:block which forces a line break before and after the element.If you want to remove the line breaks , you can use display:inline which will display elements horizontally.Make the div's display property to display:inline or display:inline-block you want to appear horizontally .

Solution 4

Try this way:

#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    float:right;}

#left {
    position:relative;
    width:712px;
    height: 207px;
}

#slideshow {
    position:absolute;
    top:20px;
    left:20px;
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}​

Basically I put a float:right; on the logo to position it right, then added position:relative to the #left div and position:absolute to the #slideshow div. This way you can adjust the top and left attributes to position the slideshow anywhere you want it.

View more solutions

Comments

[Priyank Patel]

can you tell us which two divs you want without linebreak

[Dor Aharonson]

"left" and "logo". (and "slideshow" but he is inside "left")

[Dor Aharonson]

When I use display: inline; I then all the divs are just missing... exept the div "header" When I use display: inlie-block; it looks just like it looks now...

[Dor Aharonson]

When I use display: inline; I then all the divs are just missing... exept the div "header" When I use display: inlie-block; it looks just like it looks now...

[Dor Aharonson]

When I use display: inline; I then all the divs are just missing... exept the div "header" When I use display: inlie-block; it looks just like it looks now...

[Baz1nga]

that is because of the unnatural width and height that you have set.. fix that

[T.J. Crowder]

@DorAharonson: That's because of the margin: auto and also the fact that you have very wide divs. You'll have to play with that a bit, possibly put the header inside something else. inline-block is probably what you want, or possibly float: left (but you'll have to play with that as well), possibly both.