CODEWITHSUNDEEP
htmlcss
Alexander Shlenchack
Alexander Shlenchack

Reputation: 3869

Placing 3 div's side by side (1 fixed, 2 with 100% of free space and 3 auto)

I have a layout where I have 3 columns.

<div id="wrapper">
    <div id="logo"></div>
    <div id="search-input"></div>
    <div id="user-name"></div>
</div>

How can I place these 3 blocks in one line without JS, calc and flexbox if I need:

Upvotes: 1

Views: 65

Answers (4)

Se Song
Se Song

Reputation: 1663

May be this is what you want. you can add content of user-name to see how it work.

.wraper{
   width: 100%;
   border: 1px solid red;
}
#logo{
  float:left;
  width:250px;
  height: 50px;
  border:1px solid #CCC;
  display:block;
  background-color:yellow;
}
#search-input{
  margin-left:260px;
  min-height:50px;
  display:block;
  background-color:red;
}
#user-name{
  float:right;
  display:block;
  height:50px;
  background-color:#FFF;
}
#search-input > .inner{
  height:50px;
  background-color:red;
  margin-right:20px;
}
#user-name > .inner{
  background-color:green;
  min-width:150px;
  height:50px;
  margin-left:10px;
}
<div id="wrapper">
    <div id="logo">Logo</div>
    <div id="user-name">
      <div class="inner">
        user name
      </div>
    </div>
    <div id="search-input">
      <div class="inner">
        search input
      </div>
    </div>
</div>

Upvotes: 1

Ananta Prasad
Ananta Prasad

Reputation: 3859

<div id="wrapper">
        <div id="logo"></div>
        <div id="search-input"></div>
        <div id="user-name"></div>
    </div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}  
</style>

Upvotes: 1

M.Matias
M.Matias

Reputation: 107

#wrapper{
   display:block;
}
#logo{
   display:inline-block;
   width:30%;
   float:left;
}
#search-input{
  width:50%;
  display:inline-block;
  float:left;
}
#user-name{
  width:auto;
  display:inline-block;
  float:left;
}

This will keep them in one line.

Upvotes: 0

Amit
Amit

Reputation: 46341

Use flexbox:

#wrapper {
   display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
  flex: 0 0 200px;
  background-color: lightgreen;
}
#user-name {
  flex: none;
  background-color: lightblue;
}
#search-input {
  flex: 1 0 auto;
  background-color: lightgrey;
}
<div id="wrapper">
  <div id="logo">logo</div>
  <div id="search-input">input</div>
  <div id="user-name">user name</div>
</div>

Upvotes: 2

Related Questions