CODEWITHSUNDEEP
htmlcss
Irakli Lekishvili
Irakli Lekishvili

Reputation: 34158

HTML/CSS div is not fitting in div

I have a problem with CSS and HTML I cannot understand why this is happening

HTML:

<body>
  <div id="header">
    <div id="header_conteiner">
      <div id="logo_container">
        <img src="images/logo.png" /> 
      </div>
      <input type="text" id="txtSearch" class="text_input" />
    </div>
  </div>
</body>

CSS:

body{
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;
    margin: 0px;
    padding: 0px;
}

#header{
    height:100px;
    background:#000000;
    width:100%;
    margin:0px;
    border:0px solid #6F3;
}

#header_conteiner{
    width:1000px;
    height:100px;
    border:1px solid #9F0;
    margin:0 auto;
}

#logo_container{
    padding-top:3px;
    width:237px;
    height:100px;
    border:1px solid #03F;
}

#txtSearch{
    width:220px;
    height:20px; float:right;
}

Here is result: enter image description here

as you see in image input text is out of header_conteiner can anyone advice me something?

Upvotes: 2

Views: 923

Answers (4)

OrangeTux
OrangeTux

Reputation: 11461

Add this to #header_conteiner:

  float: left;
  clear: both;

So result is this:

#header_conteiner{
  width:1000px;
  height:100px;
  border:1px solid #9F0;
  margin:0 auto;
  float: left;
  clear: both;
}

Upvotes: 1

s_p
s_p

Reputation: 4693

it looks like logo_container has a padding on top of 3px

Upvotes: 1

IsisCode
IsisCode

Reputation: 2490

logo_container is a div, a block element. Meaning it takes up the horizontal space in its container; the next HTML element will be forced below it. As logo_container is set to 100px, the same as header_conteiner, there is no vertical space left for your input box. It is forced below logo_container.

To fix the problem, you could make logo_container an inline element and float it left. Inline elements can sit next to each other, whilst block-line elements need their own horizontal space.

CSS display property: http://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 1

Czechnology
Czechnology

Reputation: 14992

Move the input before the logo container.

Upvotes: 5

Related Questions