Two Divs on Top Of Two

Pleasant good morning,
I'm having a bit of problems with a stacking four divs (two on top of two).
when i arrange them how i want them to be the two top divs are aligned ok.
the botom left div is also ok , but the bottom right is aligned right but it starts at the bottom of the left div
leaving the same same amount of space which is the actual div size it self.
please see the code below:
HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #10218B;
</style>
</head>


<body>
<div id="wrapper">
    <header> <img src="/images/head/ags_refrigeration_header.png"> </header>
       
        <div id="center-wrapper">
       
        <nav> </nav>
       
        
       <section> </section>
       
       
       <div id="right">
        </div>

   
<div id="leftcontainer">

   <div class="left1"></div>
   
    
    <div class="left2"></div>
      
     </div>
     
     
     <div id="leftcontainerbottom">
    
   <div class="left3"></div>
   

    <div class="left4"></div>

</div>


<div id="bottom"></div>


<footer> </footer>

</div>

</div>
</body>
</html>
the CSS
#wrapper {
background-color: #10218B;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
html,body {padding opx; margin 0px;}
header {
height: 120px;
width: 100%;
text-align: center;
background-color: #FFF;
p { padding-left:10px;
padding-right: 10 px;
#center-wrapper {
height: 500px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
nav {
background-color: #006;
height: 50px;
width: 100%;
section {
height: 60px;
width: 100%;
background-color: #0C3;
margin-top: 5px;
margin-bottom: 5px;
#right {
float: right;
height: 400px;
width: 320px;
margin-right: 10px;
background-color: #036;
#leftcontainer {
background-color: #066;
height: 200px;
width: 660px;
.left1 {
background-color: #9C3;
float: left;
height: 200px;
width: 320px;
margin-left: 10px;
margin-bottom: 5px;
.left2 {
background-color: #0C0;
float: right;
height: 200px;
width: 320px;
margin-bottom: 5px;
#leftcontainerbottom {
height: 200px;
float: left;
background-color: #066;
display: inline-block;
width: 650px;
.left3 {
background-color: #336;
height: 200px;
width: 320px;
float: left;
margin-left: 10px;
position: absolute;
top: 0px;
.left4 {
background-color: #C39;
height: 200px;
width: 320px;
float: right;
margin-left: 10px;
position: absolute;
#bottom {
background-color: #C96;
clear: both;
height: 60px;
width: 1000px;
footer {
background-color: #000;
clear: both;
height: 80px;
width: 100%;
your help woul be highly appreciated as im stuck on this project

I have removed the absolute positioning from the classes left3 and left4 divs. Here is the modified code..
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header> <img src="/images/head/ags_refrigeration_header.png" /> </header>

<div id="center-wrapper">
   
    <nav> </nav>
   
   
    <section> </section>
   
   
    <div class="left">
      <div id="leftcontainer">
       
        <div class="left1"></div>
        
        
        <div class="left2"></div>
        
       </div>
      
      
       <div id="leftcontainerbottom">
        
        <div class="left3"></div>
        
        
        <div class="left4"></div>
        
        </div>
     </div>
    
    
    <div id="right"> </div>
    
    
    <div id="bottom"></div>
    
    
    <footer> </footer>
    

</div>
</div>
</body>
</html>
CSS
body {
    background-color: #10218B;
#wrapper {
    background-color: #10218B;
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
html, body {
padding opx;
margin 0px;
header {
    height: 120px;
    width: 100%;
    text-align: center;
    background-color: #FFF;
p {
    padding-left: 10px;
    padding-right: 10 px;
#center-wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
nav {
    background-color: #006;
    height: 50px;
    width: 100%;
section {
    height: 60px;
    width: 100%;
    background-color: #0C3;
    margin-top: 5px;
    margin-bottom: 5px;
#right {
    float: right;
    height: 400px;
    width: 320px;
    margin-right: 10px;
    background-color: #036;
#leftcontainer {
    background-color: #066;
    height: 200px;
    float: left;
    width: 660px;
.left {
    float: left;
    width: 660px;
.left1 {
    background-color: #9C3;
    float: left;
    height: 200px;
    width: 320px;
    margin-left: 10px;
    margin-bottom: 5px;
.left2 {
    background-color: #0C0;
    float: right;
    height: 200px;
    width: 320px;
    margin-bottom: 5px;
#leftcontainerbottom {
    height: 200px;
    float: left;
    background-color: #066;
    display: inline-block;
    width: 660px;
.left3 {
    background-color: #336;
    height: 200px;
    width: 320px;
    float: left;
    margin-left: 10px;
    top: 0px;
.left4 {
    background-color: #C39;
    height: 200px;
    width: 320px;
    float: right;
    margin-left: 10px;
#bottom {
    background-color: #C96;
    clear: both;
    height: 60px;
    width: 1000px;
footer {
    background-color: #000;
    clear: both;
    height: 80px;
    width: 100%;
Hope this helps

Similar Messages

Help with two DIVs as columns at 100% page height

I've got two DIVs side by side on my page and I want both columns to fill the page from top to bottom.
The left DIV stops about half way down the page.
There are DIVs inside of each column.
My test link is: http://faceworks.webtestingsite.net/pages/facials.html
Here's the CSS I used for the columns,
#leftSideBkgd {
          position:absolute;
          min-height:100%;
          background-color: #f0f0f0;
          width: 25%;
          left: 0px;
          top: 0px;
          z-index: 0;
          background-image: url(../img/bkgd/leftMenu.jpg);
          background-repeat: repeat-y;
          background-position: 100% 0px;
#rightSideBkgd {
          position: absolute;
          background-color: #FFFFFF;
          width: 75%;
          left: 25%;
          top: 0px;
          z-index: 0;
          min-height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          background-position: 0px 0px;
html {
          height:100%;
body {
          height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #FFF;
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 14px;
          font-style: normal;
          line-height: 1.75em;
          font-weight: normal;
          color: #000;
Thanks for your help with this

You cannot safely force the height on those divs, without also getting ugly vertical scrollbars.
Your choices are three -
1. Use Faux columns (Google it) to make it *look* like the divs are the same height.
2. Use javascript to actually dynamically determine what height to use for the columns.
3. Use CSS3 to make the adjacent columns behave as if they were two adjacent cells in a table, resulting in them being the same height.
My preference is #1 - it's easy and VERY effective. I don't like #2 as a solution, and #3 works beautifully if you are not worried about supporting IE6 or 7.

How can I put two triggers on top of eachother, and have them both work when clicked?

I'm creating this slideshow, with before and afters of my work. At the bottom right corner, I want a small frame with the before image. The fullscreen slideshow though, has arrow buttons working as triggers to either go back in the slideshow or move onto the next image. I want the other smaller slideshow at the bottom right corner to sync up with the corresponding "Before" images in the fullscreen slideshow. So, my idea was get both of the forward/back arrow buttons from the widgets and put them on top of eachother, assuming it would advance or go back on both of the widgets. It's not working though, only the top-most trigger works.
Simplified version without the mumbo-jumbo!:
I want to put two triggers on top of eachother, but when I do this, only the top-most trigger functions. Any way to get this to work? or creative ways to get around this?
Thanks in advance!

You can't have it click on two things at once. You would have to write some javascript to have one button do both actions. This would not be very easy in Muse so I would say this is not somethingthat is supported in Muse.

How to align these two divs next to eachother and center page?

Hey Guys
I am wanting to align two div's together and center them on the page. Any help in doing this would be great. Whenever I set them to float right or left itt'l just go elsewhere on the page... It's the two "caption" div's.
I dunno how to insert code here but website is currently vieweable here
http://adamdowning.net/rotherhamphoenixcc/team.html

Hi desertdame,
As Peter said, make a dummy booklet.
two pieces of paper 8 half pages with each one approx 8 x 5.5 when an 8 1/2 x 11 is folded in half and made into a booklet.
I think this arrangement will work:
That is a screen shot of thumbnails. I used:
File > New From Template Chooser > Page Layout > Catering Brochure.
Then I deleted the content to leave just a text box on the left and right of each page.
Regards,
Ian.

Create a Crystal report on top of two queries

Hi All,
Is it possible to create a report on top of two Bex queries in Crystal reports 2008 & Crystal report 2011 & CR enterprise version 4.0?
Please explain the steps if possible.
Thanks in Advance....

Not possible!
You'll need to use a Subreport to separate the queries.
-Abhilash

How to Get two divs to consistantly align with one another?

Hi I know that this is a newbie question, but I am trying to get two div tags to align right next to each other. I do not understand what the problem is,
since I did it with my first web page, without any problems. This time the two div tags line up in some kind of weird step formation, and not neatly side by side.
Any help would be great! the CSS is below: I am trying to get #newsColumn (left) and #events (right) to properly align inside of #contentBackground
#contentBackground {
    background-image: url(images/pages/pages_content_s1.png);
    background-repeat: repeat-y;
    overflow: auto;
    margin: 0px;
    padding: 0px;
    width: auto;
#newsColumn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    width: 500px;
    margin: 0px;
    float: left;
#events {
    clear: both;
    float: right;
    width: 500px;
I have tried many different combinations, floats and clears. Nothing is working and I am at my wits end! Thanks in advance for your help

Use floats. See code & demo below:
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

I have two separate itune accounts under two different email accounts and would like to combine them under one account. Is this possible and if so, how do I do it?

I have two separate itune accounts under two different email accounts and would like to combine them under one account. Is this possible and if so, how do I do it?

If you go to Settings > iTunes & AppStore , you can sign out from your account, and sign in with the one you've used to purchase apps.This will not remove any apps you already have on it.
Then you can go to AppStore and download apps you've purchased (either via "Purchased" button in "Updates", or simply search for them and download them.
That way you can have multiple accounts' apps on your iPad. When updating, you will be prompted for the credentials for account you've purchased given App with.

We have two apple ID's and two libraries. My daughter's IPOD is syncing with my library and I need to change this, but I can't figure out how.

We have two apple ID's and two libraries. My daughter's iPOD is syncing with my library and we really want to go to just one library--Mine for ease and we can't figure out how to do it. Please help!!!

Apple does not transfer content bought with one Apple ID to another Apple ID. Apple will not merge two Apple IDs.
If most of your content was bought with the Yahoo! Apple ID but you now want the Gmail address for your Apple ID, the trick will be to change the address used for the Yahoo ID with the Gmail address. However, to do that you must first free the Gmail address from that other Apple ID. Use the instructions from Apple to substitute another address that is not used as an Apple ID for your Gmail address in the Apple ID with the Gmail address. Then, when the Gmail address is no longer used in an Apple ID, you can use the same instructions to substitute the Gmail address for the Yahoo address in the Apple ID with the Yahoo address.
Changing the email address you use for your Apple ID -
http://support.apple.com/kb/HT5621

How to use two different ojdbc14.jar for two web application.

Hi,
I have two web application running in same tomcat, I need to use the two different ojdbc14.jar for two application, now both are taking the jars from tomcat common/lib directory, I tried copying the new ojdbc14.jar in web-inf/lib folder of one application, but it is not working.
Could you please let me know whether this will take the jar from tomcat by befault or from web-inf, and a solution how to proceed with this.
Thanks in advance.

Yes, I tried removing the jars from common/lib, but as the connection string is mentioned inside the server.xml it is showing db connection error while trying to connect to the database

I have two separate iTunes libraries on two separate Computers. I need to consolidate them so I can play them on a brand new computer. How do I do this so I can play them off an External Hard Drive on my brand new computer?

I have two separate iTunes libraries on two separate Computers. I need to consolidate them so I can play them on my brand new computer. How do I do this so I can play them off an External Hard Drive on my brand new computer?

Why, if it told you you have insufficient space on your computer, would it suggest making more space available on your phone?
At a guess, you have insufficient space on your phone. Installing software will typically require more space than the final size of the software, perhaps even twice or three times as much, for the installation process. You can easily dump some videos or music temporarily, and then synch them back in afterwards.

I have two different 5s's with two different phone numbers but they are both using the same iCloud/apple account. After upgrading to iOS8 when I get a phone call on one phone both phones ring.

I have two different 5s's with two different phone numbers but they are both using the same iCloud/apple account. After upgrading to iOS8 when I get a phone call on one phone both phones ring. One phone is for work and one is for private and I don't need both phones to ring from one call. It's bizarre.......is this supposed to be like this? If so where can I turn it off?? And while we are at it iOS8 has installed iBooks on both of my phones and iTunes won't let me uninstall it. I don't need or want iBooks on my phones.

Hi,
There are two easy fixes to this.
One, you can set up Family Sharing, in which you can have two different iCloud Accounts, yet still share the same apps, music, media etc.
Two, go to Settings and turn-off "Handoff". This can be found under the General page.
Hope this helps!

Can i have two internet connections connected to two airport extremes separately without disturbing the home sharing option.

can i have two internet connections connected to two airport extremes separately without disturbing the home sharing option. i want to have both the airport extremes to use a single imac for streaming music or video to my apple tv's at different places where one apple tv is in the range of one airport extreme.it's not a problem if both airport extremes have different wifi id's with separate internet.The imac which i use for streaming the music and videos is only in the range of only one airport extreme.is it possible if i can stream music or videos to my apple tv which is not in the range of same airport extreme which i use for imac but in the range of other airport extreme.
Finally what i need is i want to use two internet networks as my highest possible internet bandwidth is about 1mbps.and i know that i cant mix both the networks and make it as 2mbps.

Yes, that is possible. Please check out the following Apple Support article for details on how.

I would like to import two different cf cards from two different cameras into the same project/folder and have them be in order of the times they were taken, is there a trick?

I would like to import two different cf cards from two different cameras into the same project/folder and have them be in the order of the times they were taken, any ideas on how to do this?

Just import them normally and sort the project by date. They will fall into place. If you tried this and it isn;t happening then make sure the data and times on the two cameras are identical and make sure you are sorting by date and time and nothing else.

How can I implement two TCP/IP servers (on two separate machines) and one TCP/IP client (on third machine)

I have an application where I need to send data via TCP/IP from two separate machines to a third machine. The machines are on a local area network connected through a network switch. The data are generated independently through data acquisition by the two independent machines before are sent to the client on third machine. Each machine has one network card. Thanks.
Solved!
Go to Solution.

If you have three separate machines, you don't need to use separate ports. They will have three IP addresses.
Remember this rule: TCP connections are EXACTLY like telephone connections.
Have your client open two connections: same port on two different IP addresses.
Each client listens for connections.
After connections are established, you get to decide the protocol: maybe the client should explicitly ask for data, maybe the servers just dump it without being asked. It's up to you.
Read this:
TCP tips and tricks
Steve Bird
Culverson Software - Elegant software that is a pleasure to use.
Culverson.com
Blog for (mostly LabVIEW) programmers: Tips And Tricks

Passing parameter between two portlets which are in two diffrent pages

hi,
This is query regaring passing the parameters from one java portlets to another. Or Receiving parameter from Portlets.
The Secanrio is like :
I have two portlets shown in the two different pages. Now while running the application i want to send the all the data is entered by user in the next page.
1. How to pass the value of all the parameter in the second portlet ?
2. how to name the url of the second page in action of first page

We need to use portlet events for sending parameters across different pages.
Following documents can give you insight on this :
1. http://portalstudio.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/PDK/ARTICLES/PRIMER.PORTLET.PARAMETERS.EVENTS.HTML
2. http://portalstudio.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/PDK/ARTICLES/DESIGNING.PAGES.USING.PDKJAVA.SAMPLE.EVENT.WEB.PROVIDER.HTML
-AMJAD.

Two Divs on Top Of Two

Similar Messages

Maybe you are looking for