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
Solved

resizing browser deforms page layout

Posted on 2010-09-03
7
462 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add or delete table rows 10 53
asp Google Map 2 23
How to create a table with buttons 3 21
GET error with Font Awesome 3 12
Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

790 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