CODEWITHSUNDEEP
htmlcss
user442920
user442920

Reputation: 847

Two-column layout with vertically and horizontally alignment, having variable height

I want to gain the below layout: enter image description here
It seems that when the right box is small, the bottom left box wants to move away from the left side and beside the top left box. If the right box is full and tall, then it pushes the bottom left box back to where I want it to be.

HTML

<div class=page>
    <div id="stack-vert"> 
        <div id="stack-horz">
            <div id="message_center_content">    
                <h2> Your Messages </h2>
            </div>
            <div id="message_center_details">
            </div>
            <div id="message_center_details">
            </div>  
            <div id="clearingdiv2"></div>
        </div>
    </div>

CSS

.page{
    margin: 2em auto;
    width: 75em;
    border: 5px solid #ccc;
    padding: 0.8em; background: white; display:table;
}
#message_center_details{
    float:left;
    border: solid thin black;
    overflow:hidden;
    padding: 5px;
    width: 25%;
    background-color: #ffffcc;
    margin: 5px;
}
#message_center_content{
    float:right;
    border: solid thin black;
    padding: 5px;
    width: 60%;    
    background-color:  #F0F0F0;
    margin: 5px;
}

JS Fiddle

It works in jsFiddle, but now in my browser! Instead the two boxes on the left interfere with each other, the bottom one sits to the right of the top one and below the box on the right.

Any help would be really appreciated.

Upvotes: 1

Views: 88

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17964

You are maybe after such a solution to have two outer divs side-by-side:

.wrapper{
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.side{
  width: 30%;
}
.side div{
  margin-bottom: 10px;
  padding: 10px;
}
.side div:last-child{
  margin-bottom: 0;
}
.main{
  width: 67%;
}
.main div{
  padding: 10px;
}
.border{
  border: 2px solid black;
}
<div class="wrapper">
  <div class="side">
    <div class="top border">
      <p>These are contents. These are contents. These are contents. </p>
      <p>These are contents. These are contents. These are contents. </p>
    </div>
    <div class="bottom border">
      <p>These are contents. These are contents. These are contents. </p>
      <p>These are contents. These are contents. These are contents. </p>
      <p>These are contents. These are contents. These are contents. </p>
    </div>
  </div>
  <div class="main">
    <div class="border">
      <p>These are contents. These are contents. These are contents. </p>
      <p>These are contents. These are contents. These are contents. </p>
    </div>
  </div>
</div>

Upvotes: 1

WelshBoyZz
WelshBoyZz

Reputation: 84

Something you could do

        <div id="Container">
      <div id="left">
        <div class="section">
        </div>
        <div class="section">
        </div>
      </div>
      <div id="right">
        <div id="message">
        <div style="width:100px;height:260px;background:white;">Edit this</div>
        </div>
      </div>
    </div>

    #Container {
  width: 100%;
  min-height: 300px;
  background: red;
}

#left {
  float: left;
  width: 40%;
  background: yellow;
  min-height: 300px;
  box-sizing: border-box;
  padding: 10px;
}

.section {
  width: 100%;
  display: block;
  min-height: 120px;
  background: red;
  box-sizing: border-box;
  margin-bottom: 10px;
}

#right {
  float: left;
  width: 60%;
  min-height: 300px;
  background: blue;
  box-sizing: border-box;
  padding: 10px;
}

#message {
  width: 100%;
  min-height: 200px;
  background: red;
}

see fiddle for what i would do. I have added colors so you can see whats happening. adjust the white div height in the HTML tab to see the message div (the red one on the right) adjust its height.

Your content would just go inside the left divs with a class of section, and the right div id message.

I would stay away from libraries until you know how to do most things yourself.

Great place to learn html/css/js and more

Upvotes: 2

Related Questions