Solved

resizing browser deforms page layout

Posted on 2010-09-03
7
459 Views
Last Modified: 2012-05-10
Hi experts,
I'm building a web application in asp.net c#
I have wasted a lot of time in styling the application.
I was about to release the version 1.0, but I've figured out one HUGE mistake that cannot solve.
The problem is than when I resize the browser, the div in the right goes below the div on the left, and if I continue resizing, the left div "divides" in the three parts than are inside.
It's very difficult to explain, but maybe in the images you can realize what's happening.

I assume that the problem is in this DIVS
<div style="float:left;">
    <div class="divMapaLeftFull" style="float: left;"></div>
    <div class="divMapaRepeaterFull" style="float: left;"></div>
    <div class="divMapaRightFull" style="float: left;"></div>
</div>

I'm attaching the code of my aspx file and also the master page and the css styles.
Also the images explaining the problem better than me.

All I want is a NORMAL layout, when making smaller the width of the browser (by resizing it) a scrollbar in the bottom of the browser.

Thanks in advance.

Regards,

Leandro Nuñez.
original layoutsmall browser sizemoremore
<%--historicos.aspx--%>
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageForm.master" AutoEventWireup="true" CodeFile="historicos.aspx.cs" Inherits="workspace_historicos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float: left;">
                <div class="divTrv"></div>
            </div>
            <div style="float:left;">
                <div class="divMapaLeftFull" style="float: left;"></div>
                <div class="divMapaRepeaterFull" style="float: left;"></div>
                <div class="divMapaRightFull" style="float: left;"></div>
            </div>
            <div style="position: absolute; margin-top: -48px; margin-left: 580px">
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="5">
                    <ProgressTemplate>
                        <asp:Panel ID="PnProgress" runat="server">
                        </asp:Panel>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
        </ContentTemplate>
        <Triggers></Triggers>
    </asp:UpdatePanel>
</asp:Content>

<%-- MasterPageForm.master--%>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageForm.master.cs" Inherits="MasterPageForm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Control de flotas - vL1.3</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="divTop" style="width: 100%; height: 45px;"></div>
    <div id="divPrincipal" style="margin-top:10px">
        <table style="width: 100%;" align="center">
            <tr>
                <td>
                    <div id="divContenido">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

.divMapaLeftFull
{
	background: url(../Global/Imagenes/body_map_full_left.png); 
	background-repeat:no-repeat; 
	width:9px; 
	height:535px;
}
.divMapaRepeaterFull
{
	background: url(../Global/Imagenes/body_map_full_repeater.png);
	background-repeat:repeat-x;
	height:535px;
}
.divMapaRightFull
{
	background: url(../Global/Imagenes/body_map_full_right.png);
	background-repeat:no-repeat;
	width:11px;
	height:535px;
}
.divTrv
{
	width:250px;
	height:535px;
	background: url(../Global/Imagenes/trv_cnt.png);
	background-repeat:no-repeat; 
	overflow:hidden;
}

Open in new window

0
Comment
Question by:Leandronn
7 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33598916
Yep that's what 'floats' do.  Unless you wrap them in a fixed size container.  Many  of us use something like '#wrapper {width:980px;margin-left: auto; margin-right:auto;} div to 'wrap' the entire page so that doesn't happen.
0
 
LVL 2

Author Comment

by:Leandronn
ID: 33599002
@DaveBaldwin: First, thanks for your answer
But then I'll be stucked in 980px of the browser width??
If float is wrong, what would be the proper way to put my divs one next to the other?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33599156
It's not that 'float' is wrong but that is the way it works.  The only other choice is tables because they don't come unstuck from each other.  You can make the width whatever you want, I just picked 980 for an example.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:Leandronn
ID: 33599624
Ok, thanks.
But what would be the correct way?

<table>
<tr>
<td> DIV LEFT </td>
<td> DIV RIGHT </td>
</tr>
</table>

Like that?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 33599776
That's standard table syntax though I don't why you put DIV in there exceot to id your content.  If you have the table, you don't need the DIV unless you are splitting the <td> into smaller blocks.  A big difference between 'div' and 'table' is that tables shrink to wrap around their content while divs take up the whole horizontal space.  You can use <table width="100%"> to make a table do that.  Note that tables have default margins and spacing unless you change them.
0
 
LVL 8

Expert Comment

by:Zado
ID: 33600397
Try add 'display:inline-block;' to both div containers
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33602131
For a fluid layout you need to change all of you width dimensions form px to %.
EXAMPLE: instead of width=700px, it would be width= 70%
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

920 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