CODEWITHSUNDEEP
htmlcsspositioning
ray
ray

Reputation: 33

CSS: how to position 2 divs (one fixed) next to each other with one div at full width?

I want to make a webpage with at the left side a DIV1 (navigation) that is fixed.

The rest of the page should be filled with let's say DIV2. But at the right side I want to have a DIV3 that only shows up on hover. And when it shows up, DIV2 needs to automatticaly change the width to fit between DIV1 and DIV3 and on release. DIV2 needs to fill the page again.

(check image)

image

html:

   <div id="DIV1">
   <img class="logo" src="logo.png">
</div>

<div id="wrapper">
        <div id="DIV3">
        <div id="DIV4"></div>
        </div>

        <div id="DIV2">
        </div>
</div>

css:

#DIV1 {
position:absolute;
width:200px;
}

#wrapper {
position: absolute;
left: 200px;
right: 0px;
width: auto;
height: 700px;
background: red;
}

#DIV3 {
right:0px;
position: absolute;
width: 300px;
height: 700px;
background: yellow;
display: none;
z-index: 5;

}

#DIV2 {
min-width:500px;
margin-right:0px;
width: auto;
height: 600px;
background: pink;
}

    #DIV4 {
    width:50px;
    height:50px;

}

   #DIV4:hover #DIV3 {
   display:block;
}

Any help would be great. Just learning HTML and CSS and don't have a damn clue...

Upvotes: 0

Views: 1165

Answers (2)

misterManSam
misterManSam

Reputation: 24702

I have created a simple concept with display: table and display: table-cell.

Compatibility: display: table is compatible IE 8 +

  • The right sidebar is hidden with width: 0

  • The right sidebar is shown on middle column hover with .middle:hover + .right

  • The transition provides a nice slide in and out

  • table-layout: fixed allows the 0 width

Working Example

Hover over the orange column to show right sidebar.

html,
body {
  height: 100%;
  margin: 0;
}
.wrap {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;      
}
.wrap > div {
  transition: width 0.8s;
}
.left {
  display: table-cell;
  width: 200px;
  background: #F00;
}
.middle {
  display: table-cell;
  background: #F90;
}
.right {
  background: #FF0;
  display: table-cell;
  width: 0;
}
.middle:hover + .right,
.right:hover {
  display: table-cell;
  background: #FF0;
  width: 300px;
}
<div class="wrap">
  <div class="left">

  </div>

  <div class="middle">
    Hover Me
  </div>

  <div class="right">

  </div>
</div>

Upvotes: 2

Paul
Paul

Reputation: 9012

Here's something that would probably work for you, but it's not an ideal way to do it. But this heavily depends on what you are building. In this example #DIV3 is shown on the right side (10px), the rest is hidden by the viewport. When hovering that yellow bar, #DIV3 slides out while #DIV2 shrinks in width (optional).

#DIV1 {
position:fixed;
width:200px;
  background: green;
  height: 700px;
}

#wrapper {
position: absolute;
left: 200px;
right: 0px;
width: auto;
height: 700px;
background: red;
}

#DIV3 {
right:-290px;
position: absolute;
width: 290px;
height: 700px;
background: yellow;
z-index: 5;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
padding-left: 10px;
}

#DIV2 {
margin-right:10px;
height: 600px;
background: pink;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
}

    #DIV4 {
    width:50px;
    height:50px;
    background: blue;

}

   #DIV3:hover {
   right: 0px;
}
#DIV3:hover + #DIV2 {
  margin-right: 300px;
}
<div id="DIV1">
   This is #DIV1, static and might be the menu.
</div>

<div id="wrapper">
        <div id="DIV3">This is the sidebar #DIV3.
        <div id="DIV4">This is #DIV4, no special behaviour right now.</div>
        </div>

        <div id="DIV2"><p>Here is some example text to show how it breaks when hovering #DIV3. (NOTE: I removed the min-width for demonstration purposes. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
</div>

Upvotes: 0

Related Questions