Solved

resizing browser deforms page layout

Posted on 2010-09-03
7
464 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Incorrect css styling in footer 3 23
CSS Odd/Even Confusion 2 37
Can't find an open element in HTML 5 50
CSS - display the same fonts throughout website. 4 21
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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 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