Dor Aharonson Dor Aharonson - 5 months ago 8
CSS Question

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

Answer

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.