Solved

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

Posted on 2014-01-07
16
330 Views
Last Modified: 2014-01-09
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
0
Comment
Question by:Ashraf Hassanein
  • 7
  • 5
  • 4
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39763585
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

0
 

Author Comment

by:Ashraf Hassanein
ID: 39763610
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?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39763619
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39763647
http://jsfiddle.net/QUuL4/2/

scroll overthe header
Don't know what you mean
0
 

Author Comment

by:Ashraf Hassanein
ID: 39764871
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
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39764982
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39765320
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
0
 

Author Comment

by:Ashraf Hassanein
ID: 39765329
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?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39765447
0
 

Author Comment

by:Ashraf Hassanein
ID: 39765574
Hi, I tried to do as your previous advice, but something wrong in my implementation :-(
https://www.hassans.nl/new/test.php
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39766007
Honestly, based on what I am seeing in this very basic code, I would say take 4 hour time out from this and go through the web fundamentals http://www.codecademy.com/tracks/web.  You will save yourself 10 times the hours you put into it.

At the very least your basic code should look like this to start
<!DOCTYPE html>
<html>
<head>
<!-- CSS files here -->
<!--  javascript files here -->
<!-- add any on page css below -->
<style>

</style>
<!-- add any of your jquery or javascript functions -->
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
<!-- each tag should be closed in the same order it was open -->
<!-- Try and stagger your tags to keep track of where you are -->
  <div class="1">
       <div class="2">
       </div><!-- close 2 -->
       <div class="3">
              <div class="4">
              </div><!-- close 4 -->
              <div class="5">
              </div><!-- close 5 -->
       </div><!-- close 3 -->
</div><!-- close 1 -->
</body>
</html>

Open in new window


Start here http://validator.w3.org/

If you start with the code sample cathel or I have given, you can replace the content with your own.  If you go to the link cathel gave you http://jsfiddle.net/GaryC123/u63cE/2/, click the "Fork" link at the top, now start replacing your content with what he has and see if that helps you.

The problem is  you have not followed the code structure we gave you.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39766026
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.
0
 

Author Comment

by:Ashraf Hassanein
ID: 39768755
Thanks for all your support, I found my mistake, the solution of cathal worked with me very well.
0
 

Author Comment

by:Ashraf Hassanein
ID: 39768773
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.
0
 

Author Comment

by:Ashraf Hassanein
ID: 39768781
Thanks for all experts for being very patient and helpful for me.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39768995
Thank you for the points. Best of luck on your project.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now