ASPX Master Pages with DIV to be side by side

StackOverflow https://stackoverflow.com/questions/12969589

  •  09-07-2021
  •  | 
  •  

Question

Need help. I cannot figure out why I cannot place div side by side in the child .aspx of master page.

The code works if I hardcode the style like this 

<div id="pagemiddleleft" style="float:left;">

But when I move the style into the CSS file, the div's refuse to sit side by side.

Below is the child code

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="pagetop">
</div>
<div id="pagemiddle">
        <div id="pagemiddleleft">111111
        </div>
        <div id="pagemiddlecenter">111111
        </div>
        <div id="pagemiddleright">111111
        </div>
        <div style="clear: both"></div>
</div>
<div id="pagebottom">
</div>
</asp:Content>

Below is an extraction of the Master Page

 <div class="page">
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
 </div>

Below is the CSS portion for the child aspx page

#pagemiddleleft {
float: left; background-color: #FFFF00;}

#pagemiddlecenter {
float: left; background-color: #00FFFF;}

#pagemiddleright {
float: right; background-color: #FF00FF;}
Was it helpful?

Solution

Try this master page layout

Master Page

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!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">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">

        </asp:ContentPlaceHolder>
        <style type="text/css">
        div.page
        {
            float: left;
            width: 100%;
            background:#ffc;
        }
        div#main
        {
            float: left;
            clear: both;
            width: 100%;
            position: relative;
        }
        div#page-left
        {
            float: left;
            width: 20%;
            background:orange;
        }
        div#page-right
        {
            float: right;
            width: 20%;
            background:green;
        }
        div#page-middle
        {
            float: left;
            margin: 0 auto;
            width: 60%;
            background:blue;
        }
    </style>
    </head>
    <body>
        <div class="page">
            <div id="main">
                <form id="form1" runat="server">
                <div id="page-left">
                   <asp:ContentPlaceHolder ID="leftContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                <div id="page-middle">
                    <asp:ContentPlaceHolder ID="middleContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                <div id="page-right">
                 <asp:ContentPlaceHolder ID="rightContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                </form>
            </div>
        </div>
    </body>
    </html>

Content Page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MasterPageFile="~/MasterPage.master"
        Inherits="_Default" %>

    <asp:Content ContentPlaceHolderID="leftContent" runat="server" ID="PageLeft">
        Page Left Contentt</asp:Content>
    <asp:Content ContentPlaceHolderID="middleContent" runat="server" ID="PageMiddle">
        Page Middle Content</asp:Content>
    <asp:Content ContentPlaceHolderID="rightContent" runat="server" ID="PageRight">
        Page Right Content</asp:Content>

OTHER TIPS

I think it's important to set the width on your elements and you can lose the clear: both <div> and just put overflow: hidden on pagemiddle. (The height isn't needed, I just put it there to better illustrate my answer)

#pagemiddle { overflow: hidden; width: 500px; }
#pagemiddleleft { float: left; background-color: #FFFF00; width: 100px; height: 100px; }
#pagemiddlecenter { float: left; background-color: #00FFFF; width: 300px; height: 100px; }
#pagemiddleright { float: right; background-color: #FF00FF; width: 100px; height: 100px; }​

Demo - http://jsfiddle.net/8NH8t/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top