CODEWITHSUNDEEP
htmlcss
chree
chree

Reputation: 258

how can I put a div inside of another div that is sitting next to a div that has a float: left property?

The question is confusing but I just want to put the 'signIn' css selector inside the 'headerRightPanel' selector and have it span that width. That is grow and shrink within it. now headerRightPanel is sitting next to headerLeftPanel which has the Float: left property. and for some reason the sign in div is expanding the whole entirety of the header which i dont want.

how can I just keep sign in inside headerRightPanel and have it expand the whole section?

html{
    height: 900px;
    border: 2px solid black;
    margin: 5px;
}

body{
    height: 885px;
    border: 2px solid black;
    margin: 5px;
}


.MAINPAGE{
    border: 2px solid black;
    height: 870px;
    margin: 5px;
}

.HEADER{
    border: 2px solid black;
    height: 175px;
    margin: 5px;
}

.headerLeftPanel{
    border: 2px solid black;
    height: 160px;
    margin: 5px;
    float: left;
    width: 75%;
}

.headerRightPanel{
    border: 2px solid black;
    height: 160px;
    margin: 5px;
}

.signIn{
    border: 2px solid black;
    height: 30px;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="MAINPAGE">
      <div class="HEADER">
        <div class="headerLeftPanel">
          
        </div>
        <div class="headerRightPanel">
          <div class="signIn">

          </div>
        </div>
      </div>
    </div>

</body>
</html>

Upvotes: 0

Views: 41

Answers (3)

Atomkind
Atomkind

Reputation: 361

Use display: grid; in your .HEADER with grid-template-column: 75% auto; - says first column (first child-element of .HEADER) is width of 75% (of its parent-element's width) and auto to set the second column (second child-element of .HEADER) fill the rest of parents element's width.

    html{
        height: 900px;
        border: 2px solid black;
        margin: 5px;
    }

    body{
        height: 885px;
        border: 2px solid black;
        margin: 5px;
    }


    .MAINPAGE{
        border: 2px solid black;
        height: 870px;
        margin: 5px;
    }

    .HEADER{
        border: 2px solid black;
        height: 175px;
        display: grid;
        grid-template-columns: 75% auto;
        grid-gap: 5px;
        margin: 5px;
    }

    .headerLeftPanel{
        border: 2px solid black;
        height: 160px;
        margin: 5px;
    }

    .headerRightPanel{
        border: 2px solid black;
        margin: 5px;
    }

    .signIn{
        border: 2px solid black;
        height: 30px;
    }
    <div class="MAINPAGE">
          <div class="HEADER">
            <div class="headerLeftPanel">
              
            </div>
            <div class="headerRightPanel">
              <div class="signIn">

              </div>
            </div>
          </div>
        </div>

Upvotes: 1

Hans Spie&#223;
Hans Spie&#223;

Reputation: 935

I'd try to solve it with flex:

html {
  height: 900px;
  border: 2px solid black;
  margin: 5px;
}

body {
  height: 885px;
  border: 2px solid black;
  margin: 5px;
}

.MAINPAGE {
  border: 2px solid black;
  height: 870px;
  margin: 5px;
}

.HEADER {
  border: 2px solid black;
  height: 175px;
  margin: 5px;
  /* All children shall flex */
  display: flex;
}

.headerLeftPanel {
  border: 2px solid black;
  height: 160px;
  margin: 5px;
  width: 75%;
}

.headerRightPanel {
  border: 2px solid black;
  height: 160px;
  margin: 5px;
  /* This item shall fill remaining space */
  flex-grow: 1;
}

.signIn {
  border: 2px solid black;
  height: 30px;
}
<div class="MAINPAGE">
  <div class="HEADER">
    <div class="headerLeftPanel">

    </div>
    <div class="headerRightPanel">
      <div class="signIn">

      </div>
    </div>
  </div>
</div>

Upvotes: 1

Satwinder Singh
Satwinder Singh

Reputation: 229

Try below things

  • give .headerRightPanel float: right; position: relative:
  • set .signIn maxWidth: 100%;

Upvotes: 1

Related Questions