Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Html & Css Layout Flow Issue

Post a Comment
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

Solution 1:

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

Solution 2: 

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 00 white;
  border: 1px solid Red;
  height: 70px;
  margin-bottom: 20px;
  padding: 0010px;
  width: 100%;
}
#titleInfo {
  border-bottom: 3px solid #FCDA55;
  color: #2377D1;
  float: right;
  font: bold 18pt Arial;
  height: 35px;
  margin: 10px0010px;
  overflow: hidden;
  padding: 10px00;
  width: 55%;
}
#signOut {
  font: bold 9pt Arial;
  float: right;
  border-bottom: none;
  padding: 0px10px00;
  margin: 0px0px30px0;
  display: inline;
}
#logo {
  border: 1px solid orange;
  float: left;
  height: 32px;
  margin: 03px0020px;
  padding: 10px030px;
  width: 15%;
}
#centralContainer {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: white;
}
/*Elements within centralContainer*/#leftNavContainer {
  background: none repeat scroll 00#CCCCCC;
  border: 1px solid Blue;
  float: left;
  height: 700px;
  margin: 00010px;
  width: 20%;
}
#subContainerForLeftNav {
  width: 190px;
  height: auto;
  /*border:1px solid green;*/
}
#mainContainer {
  background: none repeat scroll 00 white;
  border: 1px solid Green;
  height: 700px;
  margin: 000219px;
  width: 76%;
}
.menuText {
  font: bold 13pt Arial;
  line-height: 15pt;
  color: #00A6B5;
}
.menuTextHeading {
  height: 20px;
  border-bottom: 3px solid #fcda55;
  padding: 10px010px0;
  margin: 0010px0;
}
.buttonAlign {
  height: auto;
  width: auto;
  float: right;
  padding: 0000;
  margin: 0000;
}
.backgroundButton {
  width: 150px;
  height: 86px;
  display: block;
  margin: 0px0px5px0px;
  background-image: url('../Images/ButtonBackground.bmp');
}
.buttonText {
  font: bold 15pt Arial;
  line-height: 18pt;
  color: #ffffff;
  padding: 40px15px015px;
  margin: 0000;
  text-align: center;
}
.clear {
  clear: both;
}
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"><title>Support Site</title><linkhref="Styles/MasterStyle.css"rel="stylesheet"type="text/css" /></head><body><divid="wrapper"><divid="container"><divid="header"><divid="logo"><imgalt="logo"src="Images/Logo.bmp" /></div><divid="titleInfo"><ahref="#">Admin XXXXXXXX Support Site</a><divid="signOut"><aid="logOnStatus"class="signOut">
                            Logout</a></div></div><divclass="clear"></div></div><divid="centralContainer"><divid="leftNavContainer"><divid="subContainerForLeftNav"><divid="adminDiv"><divclass="backgroundButton"id="adminButton"><pclass="buttonText">
                  The Admin</p></div></div><divclass="clear"></div><divid="vendorDiv"><divclass="menuTextHeading"><aclass="menuText">The Management</a></div><divclass="buttonAlign"><divclass="backgroundButton"id="connectivityButton"><pclass="buttonText">
                    Test</p></div><divclass="backgroundButton"id="vendorsButton"><pclass="buttonText">
                    Test</p></div></div></div><divclass="clear"></div><divid="monitoringDiv"><divclass="menuTextHeading"><aclass="menuText">Test</a></div><divclass="buttonAlign"><divclass="backgroundButton"id="transactionsButton"><pclass="buttonText">
                    Test</p></div><divclass="backgroundButton"id="logsButton"><pclass="buttonText">
                    Test</p></div></div></div></div></div><divid="mainContainer"><divid="transactionContentHolder"class="transactionContentHolder">
            A
          </div></div><divclass="clear"></div></div></div></div></body></html>

this might help you fiddle

Post a Comment for "Html & Css Layout Flow Issue"