Ashraf Hassanein

asked on 1/7/2014

How to divide the remaining of the the screen to 3 parts eauql parts in CSS

I want to implement the attached image, but I am not sure how can I split the remaining of the page vertically to 3 parts, here is my code:

      #window1 {
           margin-top: 90px;
           background-position: top left;
           width: 100%;
           height: 200px;
           padding: 0.5em;
           position: fixed;
           overflow: auto;
           }
      #window2 {
           margin-top: 290px;
           margin-left: 200px;
           width: 100%;
           height: 200px;
           padding: 0.5em;
           position: fixed;
           overflow: auto;
           }
       #window3 {
           margin-top: 490px;
           margin-left: 200px;
           background-position: top left;
           width: 70%;
           height: 200px;
           padding: 0.5em;
           position: fixed;
           overflow: auto;
           }
       #window4 {
           margin-top: 490px;
           margin-left: 200px;
           width: 30%;
           height: 300px;
           padding: 0.5em;
           position: fixed;
           overflow: auto;
           }

Open in new window

main-page.jpg

CSS

Last Comment

Scott Fell

8/22/2022 - Mon

Gary

1/7/2014

http://jsfiddle.net/QUuL4/1/

<div id="header">header</div>
<div id="sidebar">Sidebar</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="bottom-container">
<div id="content3">content3</div>
<div id="content4">content4</div>
    </div>

Open in new window

div {
    border:1px solid blue
}
#header {
    height:90px
}
#sidebar {
    float:left;
    width:200px
}
#content1{
margin-left: 210px;
    height:90px
}
#content2{
    margin-left: 210px;
    height:90px
}
#bottom-container{
        margin-left: 210px;  
        height:90px
}
#content3{
    display:inline-block;
width:49%
}
#content4{
        display:inline-block;
width:49%
}

Open in new window

Ashraf Hassanein

1/7/2014

ASKER

Hi Gary,
In http://jsfiddle.net/QUuL4/1/ I can see that content3 and 3 are splitting the bottom div as rows (horizontally) but I want them to split it as columns (vertically) also I have tried the first 2 contents (1, and 2) and can see that in my implementation that the can scroll overthe header, what do you advise?

Scott Fell

1/7/2014

I like to use a responsive framework with a grid. http://getbootstrap.com/css/

http://jsbin.com/OSoyOda/1/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="row">
      <div class="col-sm-12">Nav</div>
  </div>
  <div class="row">  
      <div class="col-sm-2">Left</div>
      <div class="col-sm-10">
    
           <div class="col-sm-12">Mid Top</div>
           <div class="col-sm-12">Mid Mid</div>
           <div class="col-sm-6">Mid Bottom Left</div>
           <div class="col-sm-6">Mid Bottom Right</div>
      </div>
  </div>
</body>
</html>

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

Gary

1/7/2014

http://jsfiddle.net/QUuL4/2/

scroll overthe header
Don't know what you mean

Ashraf Hassanein

1/8/2014

ASKER

I did not work in my implementation, but I tried the following code:

   <style>
      #window1 {
           position: fixed;
           margin-left: 5px;
           height: 200px;
           overflow: auto;
           }
      #window2 {
           position: fixed;
           margin-top: 200px;
           margin-left: 5px;
           height: 170px;
           overflow: auto;
           }
       #bottomHome {
           position: fixed;
           margin-top: 400px;
           margin-left: 5px;
           border: none;
           overflow-y:hidden;
           overflow-x:hidden
           }
       #window3 {
           float: left;
           width: 300px;
           padding: 0.5em;
           overflow: auto;
           }
       #window4 {
           width: 100px;
           padding: 0.5em;
           overflow: auto;
           }
   </style>
  <div id="window1">
       </div>
</div>
<div id="window2">
 
     </div>
</div>
<div id="bottomHome">
<div id="window3">
   </div>
<div id="window4">
       </div>
</div>

Open in new window

But I have now is something as the attached image,
How can I:
1- Attach the Div bottomHome directly to the above div?
2- Get both Window 3 and 4 on the same level?
3- Make Window 3 and 4 scorrable?
error-style.JPG

Scott Fell

1/8/2014

It is always a good idea to run your code through a validator like http://validator.w3.org/ For everything you open, it must be closed in the same order. In this case, your html is invalid that you just posted.

Did you notice how this worked http:#a39763647 or a different approach http:#a39763619

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Gary

1/8/2014

What is wrong with the sample code I posted
The code you are trying to use is not a good way to do it at all - it will cause a lotta problems

Ashraf Hassanein

1/8/2014

ASKER

But now I am confused :-) The example you attached earlier requires to change the css, can't my issue solved by just adjusting the divs?

ASKER CERTIFIED SOLUTION

Gary

1/8/2014

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Ashraf Hassanein

1/8/2014

ASKER

Hi, I tried to do as your previous advice, but something wrong in my implementation :-(
https://www.hassans.nl/new/test.php

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

SOLUTION

Scott Fell

1/8/2014

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Gary

1/8/2014

I don't know how anyone can help you when you insist on using your own code that is badly devised but won't take on board other experts suggestions
I couldn't even begin to debug the link you gave as half the page is off screen and due to your own code is not even accessible because you have basically disabled the page scrolling.

Ashraf Hassanein

1/9/2014

ASKER

Thanks for all your support, I found my mistake, the solution of cathal worked with me very well.

Ashraf Hassanein

1/9/2014

ASKER

I've requested that this question be closed as follows:

Accepted answer: 250 points for GaryC123's comment #a39765447
Assisted answer: 0 points for AshrafHassanein's comment #a39764871
Assisted answer: 250 points for padas's comment #a39766007

for the following reason:

Thanks for all experts my mistake with a typo, thank you so much for your great support.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Ashraf Hassanein

1/9/2014

ASKER

Thanks for all experts for being very patient and helpful for me.

Scott Fell

1/9/2014

Thank you for the points. Best of luck on your project.