?
Solved

resizing browser deforms page layout

Posted on 2010-09-03
7
Medium Priority
?
467 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 84

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 84

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

719 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