HTML & CSS Layout Flow Issue

Question

I have a flow layout with following two alignment issues

Refer Image 1: When I change the zoo, the title info overlaps the logo.
Refer Image 2: The green box should come as right side of the blue box; currently it is coming on bottom.

How can I correct it? The code is available in this fiddle . Posted here also.

I am sure it is a very basic alignment lesson; however I am not able to figure it out even after many hours? Can you please take a look at it and answer?

Image 1 enter image description here

Image 2 enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Support Site </title>
<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                <img alt="logo" src="Images/Logo.bmp" />
            </div>
            <div id="titleInfo">
                <a href="#">Admin XXXXXXXX Support Site</a>
                <div id="signOut">
                    <a id="logOnStatus" class="signOut" >
                        Logout</a>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
        <div id="centralContainer">
            <div id="leftNavContainer">
                <div id="subContainerForLeftNav">
                    <div id="adminDiv">
                        <div class="backgroundButton" id="adminButton">
                            <p class="buttonText">
                                The Admin</p>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    <div id="vendorDiv">
                        <div class="menuTextHeading">
                            <a class="menuText">The Management</a>
                        </div>
                        <div class="buttonAlign">
                            <div class="backgroundButton" id="connectivityButton">
                                <p class="buttonText">
                                    Test</p>
                            </div>
                            <div class="backgroundButton" id="vendorsButton">
                                <p class="buttonText">
                                    Test</p>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    <div id="monitoringDiv">
                        <div class="menuTextHeading">
                            <a class="menuText">Test</a>
                        </div>
                        <div class="buttonAlign">
                            <div class="backgroundButton" id="transactionsButton">
                                <p class="buttonText">
                                    Test</p>
                            </div>
                            <div class="backgroundButton" id="logsButton">
                                <p class="buttonText">
                                    Test</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="mainContainer">
                <div id="transactionContentHolder" class="transactionContentHolder">
                    A
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

body
{
   margin: 0px;
   padding: 0px;
   text-align: center;
   background: Yellow;
}

#wrapper
{
   width: 100%;
   height: auto;
   text-align:left;
   margin: 0 auto;
   /*background: #FFBA31;*/
   background: #FFBA31;
}

#container
{
   width: 100%;
   height: auto;
   margin: 0 auto;
   background: white;

}

#header
{
   width: 100%;
   height: 70px;
   background: white;
   padding: 0 0 10px 0;
   border:1px solid Red;

}

#titleInfo
{
font:bold 18pt Arial;
color:#2377D1; 
width:80%;
   height:35px;
   float:right;
   margin:10px 0 0 10px;
   border-bottom:3px solid #fcda55;
   padding: 10px 0 0 0;
   display:inline;

}

#signOut
{
font:bold 9pt Arial;
   float:right;
   border-bottom:none;
   padding: 0px 10px 0 0;
   margin: 0px 0px 30px 0;
   display:inline;
}



#logo
{
  width:15%;
  height:60px;
  float:left;
  margin:0 0 0 20px;
  display:inline;
  padding: 10px 0 30px 0;
}

#centralContainer
{
   width: 100%;
   height:auto;
   margin: 0 auto;
   background: white;
}

#leftNavContainer
{
   width: 20%;
   height: 700px;
   /*float: left;*/
   margin: 0 0 0 10px;
   display: inline;
   background: white;
   border:1px solid Blue;   
}

#subContainerForLeftNav
{
 width: 190px; 
 height: auto;

}

#mainContainer
{
   width: 75%;
   height: 700px;
   float: left;
   margin: 0 0 0 30px;
   display: inline;
   background:white;
   border:1px solid Green;
}




 .menuText
 {
    font:bold 13pt Arial;
   line-height:15pt;
    color:#00A6B5;
 }

.menuTextHeading
{
   height:20px;
   border-bottom:3px solid #fcda55;
   padding:10px 0 10px 0;
   margin:0 0 10px 0;
}

.buttonAlign
{
  height:auto;
  width:auto;
  float: right;
  padding:0 0 0 0;
   margin:0 0 0 0;
}


.backgroundButton
{      
   width:150px;
   height:86px;
   display: block;
    margin: 0px 0px 5px 0px;
   background-image:url('../Images/ButtonBackground.bmp');
}

.buttonText
{

   font:bold 15pt Arial;
   line-height:18pt;
   color:#ffffff;
   padding:40px 15px 0 15px;
   margin:0 0 0 0;
   text-align:center;

}

.clear
{
   clear: both;
}

What does this have to do with asp.net, javascript or jquery? Please tag your questions correctly in future. — Rory McCrossan
– Rory McCrossan, Commented Apr 13, 2012 at 9:14
This basically says, "here's my problem and here's all my code... go fix it!" Just give us what we need to debug, not the whole load. It's not our job to go sifting through reams of code — Dan Hanly
– Dan Hanly, Commented Apr 13, 2012 at 9:19
dear see my answer and let me know if any issues or i am lagging some where. — w3uiguru
– w3uiguru, Commented Apr 13, 2012 at 9:31

w3uiguru · Accepted Answer · 2012-04-13 09:37:30Z

2

see fiddle for code and demo

fiddle: http://jsfiddle.net/L3And/3/

demo: http://jsfiddle.net/L3And/3/embedded/result/

Screen Shot:

enter image description here

edited Apr 13, 2012 at 9:37

answered Apr 13, 2012 at 9:30

w3uiguru

5,9152 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LCJ Over a year ago

Thanks. At 155 % Zoom, it comes the title splits into two lines. Also the greenbox go down. Is there a way in which the adjustment (reduction in width) will happen only upto a minium width so that the text does not go to second line? Also, can you explain what is the concept that I missed here?

w3uiguru Over a year ago

For titleInfo in header i intentionally set overflow:hidden which is preventing the layout to break down. In my system the green box is not going down. Can you specify me that why you are zooming? I mean any specific design issue or something else?

w3uiguru Over a year ago

You have set block level elements to inline which is use less in your case. Margin, padding, width of the elements and floats are not used correctly thats why your layout was messing up.

Matt · Accepted Answer · 2016-08-02 08:14:38Z

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background: Yellow;
}
#wrapper {
  width: 100%;
  height: auto;
  text-align: left;
  margin: 0 auto;
  /*background: #FFBA31;*/
  background: #FFBA31;
}
#container {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: white;
}
#header {
  background: none repeat scroll 0 0 white;
  border: 1px solid Red;
  height: 70px;
  margin-bottom: 20px;
  padding: 0 0 10px;
  width: 100%;
}
#titleInfo {
  border-bottom: 3px solid #FCDA55;
  color: #2377D1;
  float: right;
  font: bold 18pt Arial;
  height: 35px;
  margin: 10px 0 0 10px;
  overflow: hidden;
  padding: 10px 0 0;
  width: 55%;
}
#signOut {
  font: bold 9pt Arial;
  float: right;
  border-bottom: none;
  padding: 0px 10px 0 0;
  margin: 0px 0px 30px 0;
  display: inline;
}
#logo {
  border: 1px solid orange;
  float: left;
  height: 32px;
  margin: 03px 0 0 20px;
  padding: 10px 0 30px;
  width: 15%;
}
#centralContainer {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: white;
}
/*Elements within centralContainer*/

#leftNavContainer {
  background: none repeat scroll 0 0 #CCCCCC;
  border: 1px solid Blue;
  float: left;
  height: 700px;
  margin: 0 0 0 10px;
  width: 20%;
}
#subContainerForLeftNav {
  width: 190px;
  height: auto;
  /*border:1px solid green;*/
}
#mainContainer {
  background: none repeat scroll 0 0 white;
  border: 1px solid Green;
  height: 700px;
  margin: 0 0 0 219px;
  width: 76%;
}
.menuText {
  font: bold 13pt Arial;
  line-height: 15pt;
  color: #00A6B5;
}
.menuTextHeading {
  height: 20px;
  border-bottom: 3px solid #fcda55;
  padding: 10px 0 10px 0;
  margin: 0 0 10px 0;
}
.buttonAlign {
  height: auto;
  width: auto;
  float: right;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.backgroundButton {
  width: 150px;
  height: 86px;
  display: block;
  margin: 0px 0px 5px 0px;
  background-image: url('../Images/ButtonBackground.bmp');
}
.buttonText {
  font: bold 15pt Arial;
  line-height: 18pt;
  color: #ffffff;
  padding: 40px 15px 0 15px;
  margin: 0 0 0 0;
  text-align: center;
}
.clear {
  clear: both;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1">
  <title>Support Site</title>
  <link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div id="container">
      <div id="header">
        <div id="logo">
          <img alt="logo" src="Images/Logo.bmp" />
        </div>
        <div id="titleInfo">
          <a href="#">Admin XXXXXXXX Support Site</a>
          <div id="signOut">
            <a id="logOnStatus" class="signOut">
                            Logout</a>
          </div>
        </div>
        <div class="clear">
        </div>
      </div>
      <div id="centralContainer">
        <div id="leftNavContainer">
          <div id="subContainerForLeftNav">
            <div id="adminDiv">
              <div class="backgroundButton" id="adminButton">
                <p class="buttonText">
                  The Admin</p>
              </div>
            </div>
            <div class="clear">
            </div>
            <div id="vendorDiv">
              <div class="menuTextHeading">
                <a class="menuText">The Management</a>
              </div>
              <div class="buttonAlign">
                <div class="backgroundButton" id="connectivityButton">
                  <p class="buttonText">
                    Test</p>
                </div>
                <div class="backgroundButton" id="vendorsButton">
                  <p class="buttonText">
                    Test</p>
                </div>
              </div>
            </div>
            <div class="clear">
            </div>
            <div id="monitoringDiv">
              <div class="menuTextHeading">
                <a class="menuText">Test</a>
              </div>
              <div class="buttonAlign">
                <div class="backgroundButton" id="transactionsButton">
                  <p class="buttonText">
                    Test</p>
                </div>
                <div class="backgroundButton" id="logsButton">
                  <p class="buttonText">
                    Test</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="mainContainer">
          <div id="transactionContentHolder" class="transactionContentHolder">
            A
          </div>
        </div>
        <div class="clear">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

this might help you fiddle

please elaborate on this, and include the relevant code snippets. a good answer should be self contained, or at least provide a paragraph describing the abstract concept. thank you.

Collectives™ on Stack Overflow

HTML & CSS Layout Flow Issue

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related