Solved

resizing browser deforms page layout

Posted on 2010-09-03
7
458 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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
@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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 2

Author Comment

by:Leandronn
Comment Utility
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 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
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
Comment Utility
Try add 'display:inline-block;' to both div containers
0
 
LVL 23

Expert Comment

by:jeremyjared74
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 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

14 Experts available now in Live!

Get 1:1 Help Now