CODEWITHSUNDEEP
htmlcss
Tobias Brage
Tobias Brage

Reputation: 69

Two DIV's side by side in smaller DIV

i'm trying to have two DIV's side by side inside a smaller DIV with overflow:hidden; I'd expect both DIV's to be side by side and have some of it's content hidden caused by their parent DIV which is smaller in width. Instead the last DIV moves under the other DIV even tho they both have float:left;.

HTML: 

<div id="wrapper"> <!-- wrapper -->
    <div id="nav"> <!-- nav -->

    </div> <!-- /nav -->
    <div id="container"> <!-- container -->

    </div> <!-- /container -->
</div> <!-- /wrapper -->

CSS:

#wrapper {
    float:left;
    height:960px;
    width:540px;
    background-color:#eeeeee;   
    overflow:hidden;
}

#nav {
    float:left;
    width:460px;
    height:960px;
    background-color:red;
}

#container {
    float:left;
    width:540px;
    height:960px;
    background-color:green;
}

This is the effect i want:

Mobile UI example

Upvotes: 0

Views: 218

Answers (2)

wahwahwah
wahwahwah

Reputation: 3177

If you want the two elements side-by-side, I think you have to add an additional "wrapper" element of some kind to surround your #nav and #container elements. (overflow set to auto so you can see the elements are next to each other.)

Example:

#wrapper {
  float: left;
  height: 960px;
  width: 540px;
  background-color: #eeeeee;
  overflow: auto;
}
#wrap {
  width: 1000px;
}
#nav {
  float: left;
  width: 460px;
  height: 960px;
  background-color: red;
  clear:
}
#container {
  float: left;
  width: 540px;
  height: 960px;
  background-color: green;
}
<div id="wrapper">
  <!-- wrapper -->
  <div id="wrap">
    <!-- some new wrapping element -->
    <div id="nav">
      <!-- nav -->

    </div>
    <!-- /nav -->
    <div id="container">
      <!-- container -->

    </div>
    <!-- /container -->
  </div>
</div>
<!-- /wrapper -->

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

I'd suggest preventing wrapping, using display: inline-block on the child <div> elements, and using white-space: nowrap; on the container:

#wrapper {
  float: left;
  height: 300px;
  width: 300px;
  background-color: #eeeeee;
  overflow: hidden;
  /* prevents content wrapping to a new line */
  white-space: nowrap;
}
#nav {
  display: inline-block;
  width: 400px;
  height: 960px;
  background-color: red;
  /* purely to move the first element to the left,
     to show that both elements are on the same line: */
  margin-left: -200px;
}
#container {
  display: inline-block;
  width: 400px;
  height: 960px;
  background-color: green;
}
<div id="wrapper">
  <!-- wrapper -->
  <div id="nav">
    <!-- nav -->

  </div>
  <!-- /nav -->
  <div id="container">
    <!-- container -->

  </div>
  <!-- /container -->
</div>
<!-- /wrapper -->

Upvotes: 1

Related Questions