• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 531
  • Last Modified:

How to get 2 divs under each other

Hi Experts,

I have a problem with divs, the below should look like
headerleft  headerright
navigation
content
footer
but it shows like
headerleft headerright
navigation content
footer

How do I get the divs naviation and content under each other?

Thanks in advance,
MB

 <div id="container">
        <div id="header">
            <div id="headerleft">
                Title
            </div>
            <div id="headerright">
                logout
            </div>
        </div>
        <div id="navigation">
           menu
        </div>
        <div id="content">
           content
        </div>
        <div id="footer">
            footer
        </div>
    </div>

html
{
    height: 100%;
}

body
{
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #99B3CC; /*Above is for non gradient support, overwritten by below*/
    background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99B3CC), to(#FFFFFF)); /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #99B3CC, #FFFFFF); /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #99B3CC, #FFFFFF); /* IE 10 */
    background: -ms-linear-gradient(top, #99B3CC, #FFFFFF); /* Opera 11.10+ */
    background: -o-linear-gradient(top, #99B3CC, #FFFFFF);
}

div#container
{
    width: 1300px;
    height: 100%;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
}
div#header
{
    width: 1300px;
    padding: 10px;
    height: 20px;
    margin: 5px 0px 5px 0px;
    background-color: #384e73;
    border: 1px solid #384e73;
    border-radius: 5px;
}
div#headerleft
{
    float: left;
    width: 200px;
    padding: 0px;
    font-size: 12px;
    font-family: "Segoe UI" ,Arial,sans-serif;
    color: #FFFFFF;
    text-align: left;
    text-shadow: 1px 1px 1px #707070;
}
div#headerright
{
    float: right;
    width: 200px;
    padding: 0px;
    text-align: right;
}

div#navigation
{
    width: 1320px;
    height: auto;
    background-color: #FFFFFF;
    border-top: 1px solid #384e73;
    border-left: 1px solid #384e73;
    border-right: 1px solid #384e73;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div#content
{
    width: 100%;
    height: 750px;
    background-color: #EFF6FD;
    border-left: 1px solid #384e73;
    border-right: 1px solid #384e73;
    border-bottom: 1px solid #384e73;
    margin: 0px 0px 5px 0px;
    padding: 0px 10px 10px 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
div#footer
{
    width: 100%;
    height: 20px;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    font-size: 12px;
    font-family: "Segoe UI" ,Arial,sans-serif;
    background-color: #384e73;
    border: 1px solid #384e73;
    vertical-align: middle;
    color: #FFFFFF;
    border-radius: 5px;
}
0
mark_norge
Asked:
mark_norge
  • 7
  • 6
  • 5
1 Solution
 
Julian HansenCommented:
put this style in
#navigation{
 clear: both;
}

Open in new window


failing that after header
<div id="header">
            <div id="headerleft">
                Title
            </div>
            <div id="headerright">
                logout
            </div>
             <div style="clear:both"></div>
        </div>

Open in new window

0
 
mark_norgeAuthor Commented:
Thanks for the reply Julian, but no success. Attached the same result as before.
css.png
0
 
Julian HansenCommented:
Can you post more code or a link to your page?

Tried to mock up what you have but it is working for me.

specifically what is the html for navigation and content?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mark_norgeAuthor Commented:
Hi Julian,

Below the code for masterpage
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="VRS.master.vb" Inherits="VRS.VRS" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="MasterStyleSheet.css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
  </head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Office2010Blue">
    </telerik:RadSkinManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div id="container">
        <div id="header">
            <div id="headerleft">
                Vessel Reporting System
            </div>
            <div id="headerright">
                <telerik:RadButton ID="btnLogOut" runat="server" ButtonType="ToggleButton" ToggleType="None"
                    CssClass="btnLogin" Text="log out">
                </telerik:RadButton>
            </div>
            <div style="clear:both"></div>
        </div>
        <div id="navigation">
            <telerik:RadMenu runat="server" ID="MainMenu" Skin="Office2010Black">
            </telerik:RadMenu>
        </div>
        <div id="content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <asp:Label ID="lblUpdateDate" runat="server" Text="Label"></asp:Label>
        </div>
    </div>
    </form>
</body>

Masterstylesheet
html
{
    height: 100%;
}

body
{
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #99B3CC; /*Above is for non gradient support, overwritten by below*/
    background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99B3CC), to(#FFFFFF)); /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #99B3CC, #FFFFFF); /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #99B3CC, #FFFFFF); /* IE 10 */
    background: -ms-linear-gradient(top, #99B3CC, #FFFFFF); /* Opera 11.10+ */
    background: -o-linear-gradient(top, #99B3CC, #FFFFFF);
}

div#container
{
    width: 1300px;
    height: 100%;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
}
div#header
{
    width: 1300px;
    padding: 10px;
    height: 20px;
    margin: 5px 0px 5px 0px;
    background-color: #384e73;
    border: 1px solid #384e73;
    border-radius: 5px;
}
div#headerleft
{
    float: left;
    width: 200px;
    padding: 0px;
    font-size: 12px;
    font-family: "Segoe UI" ,Arial,sans-serif;
    color: #FFFFFF;
    text-align: left;
    text-shadow: 1px 1px 1px #707070;
}
div#headerright
{
    float: right;
    width: 200px;
    padding: 0px;
    text-align: right;
}

div#navigation
{
    width: 1320px;
    height: auto;
    background-color: #FFFFFF;
    border-top: 1px solid #384e73;
    border-left: 1px solid #384e73;
    border-right: 1px solid #384e73;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div#content
{
    width: 100%;
    height: 750px;
    background-color: #EFF6FD;
    border-left: 1px solid #384e73;
    border-right: 1px solid #384e73;
    border-bottom: 1px solid #384e73;
    margin: 0px 0px 5px 0px;
    padding: 0px 10px 10px 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
div#footer
{
    width: 100%;
    height: 20px;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    font-size: 12px;
    font-family: "Segoe UI" ,Arial,sans-serif;
    background-color: #384e73;
    border: 1px solid #384e73;
    vertical-align: middle;
    color: #FFFFFF;
    border-radius: 5px;
}

fieldset
{
    font-size: 12px;
    font-family: "Segoe UI" ,Arial,sans-serif;
    color: #384e73;
    background-color: #FFFFFF;

A content page
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/VRS.Master" CodeBehind="PositionList.aspx.vb"
    Inherits="VRS.WebForm2" Title="Vessel Reporting System" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <table style="width: 100%; height: 100%;">
        <tr>
            <td style="height: 20px; text-align: right;">
         </td>
        </tr>
        <tr>
            <td style="height: 100%; vertical-align: top;">
                <telerik:RadGrid ID="rgvPositionList" runat="server" AutoGenerateColumns="false"
                    GridLines="None" AllowSorting="false" AllowPaging="true" PageSize="23">
                    <MasterTableView>
                        <Columns>
                      ............
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</asp:Content>
0
 
Julian HansenCommented:
Ok that is going to be difficult to work with - can you rather do a view source in the browser and post that (preferably as an attachment) - otherwise I have work through al lthe <asp> tags which is not going to be quick.
The problem you are seeing is typical of a scenario where elements have been floated and an element is too big to fit in the space to the left / right of the previous element so it appears on the next line in line with the right hand side of the previous element.
To fix this requires clearing the float so that block elements move down and to the left.
0
 
Chris StanyonCommented:
Looking at your image, it's the content DIV that needs clearing, not the navigation one.

Add clear:both to the div#content rule.

Also, because you are floating all of the header content, add overflow:hidden to the #header rule. Same goes for the #navigation rule.

#header { overflow:hidden; }
#navigation { overflow:hidden; }
#content { clear:both; }

You also have some issues with the widths of your DIVS. The #container div is 1300px wide, but the header and navigation divs are 1322px wide - they won't fit. To calculate the overall width of an block element, you add the width, the padding and the border.
0
 
Julian HansenCommented:
@ ChrisStanyon
Looking at your image, it's the content DIV that needs clearing, not the navigation one.
Except that the navigation is not supposed to be floated either - it is supposed to be block after the header - if navigation is cleared then that will apply to content as well.

Refer original post where output needs to be

headerleft  headerright <=== floated elements
navigation <=== clear here because no more floating required.
content
footer
but it shows like
headerleft headerright
navigation content
footer

Open in new window

0
 
mark_norgeAuthor Commented:
Hi,

It is improving, but I am just not there yet. Please see attached screenshot which was achieved by using:
#header { overflow:hidden; }
#content { clear:both; }

The menu seems pushed in between splitting the white background.  

I can not use #navigation { overflow:hidden; }, because the "dropdown" menu item will then not appear.

Hope you have a solution for this.

Thanks in advance,
MB
0
 
Chris StanyonCommented:
The #navigation div isn't floated. It's appearing where it's supposed to. Look at the image - it's the content that needs clearing.

I'm guessing that the navigation items within the navigation div are floated ( to give a horizontal menu ) and these need to be cleared so the content doesn't sit after them (as in the image). Adding clear:both to #content will put it in it's proper location.
0
 
Chris StanyonCommented:
No screenshot posted :)
0
 
mark_norgeAuthor Commented:
Sorry Chris, attached the screenshot.
css1.png
0
 
Julian HansenCommented:
Can you post the HTML for your navigation menu.
0
 
Chris StanyonCommented:
...or a link to the site (at least a demo of it). It looks like possible HTML problems, as the screenshot doesn't really match the posted code.
0
 
mark_norgeAuthor Commented:
Sorry for the delay. I tried several combinations of solution but was not able to solve the issue. Hopefully you can solve this based on attached screenshot and code.

Thanks in advance.

Alternatively do you have the css which should generate the layout as shown correctly?
screenshot.png
Source-code.aspx
0
 
Chris StanyonCommented:
Need to see HTML code really - not ASP. Do you have a link to a website where we could view the page - makes life a lot easier :)
0
 
mark_norgeAuthor Commented:
Hi Chris, thanks for continuous help. I am not able to run it in demo, but attached the relevant html / css. Regards, MB
html.txt
0
 
Chris StanyonCommented:
Hi Mark,

There's no content for the navigation and no styling for it either. There seems to be a bit of jumble of HTML (script tags within script tags, unclosed elements, styles within LINK tags, and the content div wrapped inside the navigation DIV!) There are links to lots of stylesheets that aren't attached which may style the navigation, but I'm working blind on this without seeing your code in action. If I could see your site (or at least a replication of the problem), I could probably debug it within minutes (Firebug). Can't really help out any more if we can't see your problem in situ.  Sorry...
0
 
mark_norgeAuthor Commented:
Hi Chris, hoped to get a test site up fast, but other priorities... Thanks for the help and perhaps I will open the question later.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now