asked on

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;
}

Julian Hansen

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

Mark Bakelaar

ASKER

Thanks for the reply Julian, but no success. Attached the same result as before.
css.png

Julian Hansen

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?

Mark Bakelaar

ASKER

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>

Julian Hansen

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.

Chris Stanyon

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.

Julian Hansen

@ 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

Mark Bakelaar

ASKER

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

Chris Stanyon

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.

Chris Stanyon

No screenshot posted :)

Mark Bakelaar

ASKER

Sorry Chris, attached the screenshot.
css1.png

Julian Hansen

Can you post the HTML for your navigation menu.

Chris Stanyon

...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.

Mark Bakelaar

ASKER

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

Chris Stanyon

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 :)

Mark Bakelaar

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mark Bakelaar

ASKER

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.