Piotr Bodaszewski Piotr Bodaszewski - 21 days ago 4
ASP.NET (C#) Question

CSS Visual Studio 2015 Float positioning help before I suicide

On the PC I used at my uni the positioning of my DIVs was working correctly both in DESIGN view of the Visual Studio 2015 Community and in Internet Explorer/Chrome browser debug mode. It was looking like this:

9 divs, 3 columns and 3 rows

At home I'm using the same version of Visual Studio as I did at the Uni.

The idea is that there are supposed to be 3 rows, and each row has 3 divs. The middle divs should be wider than the ones on the left and right, and left_mid/right_mid top_mid/bot_mid DIVs should have borders.

I put

float:left
on left divs(left_top, left_mid, left_bot),
float:right
on divs that I want to position on the right(right_top, right_mid, right_bot) and
width:auto
on the middle divs(mid_top, mid_mid, mid_bot).

It's simple thinking and it was working just fine. When I opened the solution at home the DIVs are looking as they are supposed to in DESIGN view - however in browser view when I debugged with IE/Chrome - they didn't have any height for some reason. After some time I figured out that for some reason I had to put height and width on FORM and then those little guys got back their height.
Why? I don't know, didn't need to set height and width on the FORM before.

However, that doesn't solve the problem. Their positioning is incorrect - the left_top DIV is where it is supposed to be - in left top corner of the page. Right_top DIV is also positioned correctly, it's in the right top corner of my page. HOWEVER, for some unknown reason the middle DIV(mid_top) is being positioned at the same place as left_top div. :|

It goes for all the rows - the mid_top/mid_mid/mid_bot divs are positioned exactly in the same spot as left_top/left_mid/left_bot divs(as I said only in browser debug view, in design view it looks all good).

Here is my painting of the problem to make it easier to understand:

Painting of the problem

Here is the code:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="left_side"></div>
<div id="right_side">
<div id="row1">
<div id="left_top"></div>
<div id="right_top"></div>
<div id="mid_top"></div>
</div>
<div id="row2">
<div id="left_mid"></div>
<div id="right_mid"></div>
<div id="mid_mid"></div>
</div>
<div id="row3">
<div id="left_bot"></div>
<div id="right_bot"></div>
<div id="mid_bot"></div>
</div>
</div>


</div>
</form>
</body>
</html>


And CSS stylesheet:

body {
height:800px;
width:1200px;
}

#form1{
height:800px;
width:1200px;
}

#page{
height:800px;
width:1200px;
}

#left_side{
height:100%;
width:25%;
float:left;
}

#right_side{
height:100%;
width:75%;
float:right;
}

#row1{
height:33%;
width:100%;
}

#left_top{
height:100%;
width:25%;
float:left;
}

#right_top{
height:100%;
width:25%;
float:right;

}

#mid_top{
height:100%;
width:50%;
border:dashed;
border-width:1px;
}

#row2{
height:33%;
width:100%;
}

#left_mid{
height:100%;
width:25%;
float:left;
border:dashed;
border-width:1px;

}

#right_mid{
height:100%;
width:25%;
float:right;
border:dashed;
border-width:1px;

}

#mid_mid{
height:100%;
width:50%;
}

#row3{
height:33%;
width:100%;
}

#left_bot{
height:100%;
width:25%;
float:left;
}

#right_bot{
height:100%;
width:25%;
float:right;
}

#mid_bot{
height:100%;
width:50%;
border:dashed;
border-width:1px;

}


Left_side DIV is unnecessary here - I will use it later for the project. All the action is in right_side DIV.

As you can see I tried adding some meta header but I don't exactly know what is it doing and it didn't change anything anyway.

I also tried to play with setting things like display:block, display:inline, display:inline-block etc, but to no avail... I don't know why isn't it working when it worked just fine before.

Answer

Here you go, a working example of what you're trying to do - I changed the HTML and CSS a bit, so if you're bound by using the floats and such, then it won't work, but elsewise it does exactly what you want.

html,body {
  margin: 0; padding; 0;
  }
body {
    height:800px;
    width:1200px;
}

#form1{
    height:800px;
    width:1200px;
}

#page{
    height:800px;
    width:1200px;
}

#left_side{
    height:100%;
    width:25%;
    float:left;
  display: none;
}

#right_side{
    height:100%;
    width:75%;
    float:right;
  overflow: hidden;
}
#row1 div,#row2 div, #row3 div {
  display: inline-block;
  }
.row .left,.row .right {
  width: 25%;
  }
.row .middle {
  width: 50%;
  }
#left_top{
  border: 1px solid blue;  
}
#right_top{
  border: 1px solid green;
}
#mid_top{
    border: 1px dashed brown;
}
#left_mid{
    border: 1px solid blue;
}
#right_mid{
   border: 1px solid green;
}
#left_bot{
   border: 1px solid blue;
}
#right_bot{
  border: 1px solid green;
}
#mid_bot{
  border: 1px dashed brown;  
}
#row1,#row2,#row3 {
  border: 1px solid red;
  height: 33%;
  width: 100%;
  }
div {
  box-sizing: border-box;
  }
div div {
  height: 100%;
}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="page">
            <div id="left_side"></div>
            <div id="right_side">
                <div id="row1" class="row">
                    <div id="left_top" class="left"></div><div id="mid_top" class="middle"></div><div id="right_top" class="right"></div>
                </div>
                <div id="row2" class="row">
                    <div id="left_mid" class="left"></div><div id="mid_mid" class="middle"></div><div id="right_mid" class="right"></div>                  
                </div>
                <div id="row3" class="row">
                    <div id="left_bot" class="left"></div><div id="mid_bot" class="middle"></div><div id="right_bot" class="right"></div>
                </div>
            </div>


        </div>
    </form>
</body>
</html>