FORUMS: list search recent posts

Container Issues

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Gary KrboyanContainer Issues
by on Sep 24, 2009 at 12:20:33 am

I am having some difficulties with the containers on my website. If you go to http://www.stmaryshha.com the homepage is fine. But when you click on the either of the following links, the site is broken: About Us, Contact Us, and Referral Sources.

Can anyone please help me figure out why this is happening? The entire site uses the same css, so that should not be the issue. It must be something in the html code.


Return to posts index

Fernando MolRe: Container Issues
by on Sep 24, 2009 at 6:00:41 pm

I played a little with your CSS and made some fixes. Your left sidebar still has a problem when the content is shorter. I believe that can be fixed in your HTML, if you place your "footer" div just inside your "mid-bg" div.

Can you find out what I changed here?


body {
background:#d7c565 url(images/bg.gif) repeat-x;
margin:71px 0 0 0;
}


/***********************************************/

#header {
background: url(images/stmary_logo.jpg) no-repeat;
width: 850px;
height: 168px;
margin: 0px auto;
}
#header h2{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
color:#FFF;
margin: 0;
padding-right:10px;
text-align:right;
letter-spacing:2px;
}
#header h4{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
color:#FFF;
margin: 0;
padding-right:10px;
text-align:right;
}
#mid_bg{
background:url(images/mid_BG.gif) repeat-x;

}
#mid_wrapper {
background: url(images/midbg2.gif) repeat-y;
width: 850px;
margin: 0px auto;
}

#container_foot {
background:#813c2f url(images/footer_BG.gif) repeat-x;
height:24px;
padding: 20px;
clear:both;
}

#navigation {
background:#000000;
color:#FFFFFF;
}
#sidebar {
background: #602f27;
margin: 0;
padding: 10px;
height: 410px;
width: 180px;
float:left;
}
#sidebar blockquote{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#d7c565;
margin: 0px;
}

#content {
margin: 0 0 0 200px ;
padding: 15px;
}
#content h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 130%;
}


#footer {
background:#663300 url(images/footer_BG.gif);
width: 810px;
margin: 0px auto;
padding:20px;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-align:right;
clear: both;
}
.logoblock a {
float:left;
display: block;
width: 230px;
height: 150px;
}
.home_box{
background-color: #faf3e7;
width:350px;
height:170px;
padding:10px;
float:left;
}
/****************************************************/

/* NAVIGATION -------------------------------------*/
#demo-container{padding-right:20px; margin:0 0 0 0;float:right;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:5px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px; border-top:1px #000 solid;border-left:1px #000 solid;border-right:1px #000 solid;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#000;background:#e3d3bc;line-height:27px;text-decoration:none;padding:0 25px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#b78c52;color:#fff;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
/* END NAVIGATION -------------------------------------*/


*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.


Return to posts index

Gary KrboyanRe: Container Issues
by on Sep 26, 2009 at 2:21:16 am

Thank's for taking the time to fix my css. I have updated the css based on all the changes you made to it. I also put the footer div inside the mid-big div. Everything on the site seems okay except for the pages that don't have enough content to push the container down. The left sidebar is not adapting since the content is short.

Can you please take a look at the source code again to see if there is a solution? I have updated the site with all the changes as of right now.


Return to posts index


Fernando MolRe: Container Issues
by on Sep 26, 2009 at 7:55:32 pm

Remove the height from your sidebar CSS rule.

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.


Return to posts index

Gary KrboyanRe: Container Issues
by on Sep 27, 2009 at 7:28:57 am

That worked just great. So why do you think the gray content area stretches all the way down on some pages but doesn't on others, even thought the content is shorter than the side bar in both conditions?

i.e. stmaryshha.com/referral.html has short content but the gray background stretches all the way down with the sidebar, while stmaryshha.com/contact.html does not.


Return to posts index

Fernando MolRe: Container Issues
by on Sep 27, 2009 at 2:25:56 pm

see what happens if you move the footer inside the mid_wrapper div

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.


Return to posts index


Gary KrboyanRe: Container Issues
by on Sep 27, 2009 at 11:57:09 pm

It seems like what is happening is the mid_wrapper div is only adjusting to the size of the content not the side-bar. In Dreamweaver, when I click on mid_wrapper in live code, it makes a large blue square around the content length and seems to cut through any portion of the sidebar that is vertically longer than the content.

Putting the footer inside the mid_wrapper does not fix the problem.


Return to posts index

Fernando MolRe: Container Issues
by on Sep 28, 2009 at 12:38:02 am


Try adding an element at the end of your content (can be a line break) and give it the class of "clearfloat".

Then add the CSS clearfloat rule with, guess what, a clear: both; property.

The class must be apply to an element inside the div that has the background and your content inside. This is, both your left sidebar and the right content.

The usual way to solve this kind of layout is creating a wrapper div with your general background and the width of your entire content. Then, place all the divs inside of it, and using the clearfloat rule when needed. More or less what you have done, but not exactly.

I hope this helps.

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.


Return to posts index

Gary KrboyanRe: Container Issues
by on Sep 28, 2009 at 2:04:55 am

Is there any way you can show me what the source code would look like? I don't quite know how to do that.


Return to posts index


Fernando MolRe: Container Issues
by on Sep 28, 2009 at 2:57:01 am

This is a line break with the clearfloat class:

<br class="clearfloat" />

This is the clearloat CSS:

.clearfloat {
clear: both;
}


This will be the last 10 lines of code for the contact section:

<p><a href="employmentapp.pdf">Download Employment Application</a></p>
</div>
<br class="clearfloat" />
</div>
</div>
<div id="footer">Copyright &copy; 2009 St. Mary's Home Health Services, Inc. </div>
</div>
</body>
</html>



I hope this helps

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.


Return to posts index

Gary KrboyanRe: Container Issues
by on Sep 28, 2009 at 4:45:35 am

Worked like a charm. Thanks.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]