I have a customized CSS layout that was made for me, but I am no longer in contact with the original creator. I wanted to increase the size of a specific div (#rightcolumn) by 55px. To achieve this, I resized the iframe within the div and it automatically expanded as intended. However, this adjustment caused the banner (#topsection) to become slightly shorter, so I had to add 55px to its width, making it 1255px.
As a result, the page is now off-center. I have attempted to edit other floating commands to realign the content, but all my efforts have resulted in the divs appearing misplaced. After struggling for several days, I am reaching out for assistance with re-centering the elements on the page. Any help would be greatly appreciated.
Test out the changes on this page: Serious Sports Bigger Link to the updated CSS file: CSS link
body {
margin:0;
padding:0;
line-height:1.5em;
background:#C0C0C0;
}
b {
font-size:110%;
}
em {
color:red;
}
#maincontainer {
width:1200px;
margin:0 auto;
}
#topsection {
background:#191919;
height:90px;
width:1255px
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
margin:0 360px 0 180px;
color:#F1F1F1;
}
#leftcolumn {
float:left;
width:180px;
margin-left:-1200px;
background:#C8FC98;
}
#rightcolumn {
float:left;
width:355px;
margin-left:-355px;
background:#E5E5E5;
}
#footer {
clear:left;
width:100%;
background:#191919;
color:#FFF;
text-align:center;
padding:4px 0;
}
#footer a {
color:#62C301;
}
.innertube {
margin:10px;
margin-top:0;
}
.arrowgreen {
width:180px;
border-style:solid solid none solid;
border-color:#94AA74;
border-size:1px;
border-width:1px;
}
.arrowgreen ul {
list-style-type:none;
margin:0;
padding:0;
}
.arrowgreen li a {
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
background:transparent url(http://i39.tinypic.com/2r2rhnc.gif) 100% 0;
height:24px;
padding:4px 0 4px 10px;
line-height:24px;
text-decoration:none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color:#5E7830;
}
.arrowgreen li a:hover {
color:#26370A;
background-position:100% -32px;
}
.arrowgreen li a.selected {
color:#26370A;
background-position:100% -64px;
}