CODEWITHSUNDEEP
csshtmlrowinline
Dor Aharonson
Dor Aharonson

Reputation: 85

How to put some divs in a row?

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

Upvotes: 4

Views: 52180

Answers (5)

Mrigesh Raj Shrestha
Mrigesh Raj Shrestha

Reputation: 620

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.

Upvotes: 6

Kappei
Kappei

Reputation: 714

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.

Upvotes: 1

Priyank Patel
Priyank Patel

Reputation: 6996

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 .

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074198

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>

Upvotes: 12

Baz1nga
Baz1nga

Reputation: 15579

display:inline is the css style that you need to use.

Upvotes: 0

Related Questions