Advanced Search

Results 1 to 4 of 4

Thread: CSS help with sidebar height

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Question CSS help with sidebar height

    I'm having an issue with this site http://samonasgroup.com/ I have another featured property I want to put below the featured one on the right in the right sidebar but when I do I get this see large image I got that when I tried to change the page add another property. If you look at the site now I set it back to just one featured property so the page looks correct.

    What do I need to change in my CSS file? Do I need background-repeat : repeat-y; in another of the lines? I tried to change the DIV contentbox to a table
    Code:
    <table class="contentBox"><tr><td>
    but that made that part a little narrower than the banner at the top and also left a tiny space which didn't look right.
    thanks and if you need more info please ask

    Code:
    body {
      margin: auto;
      color : #061c37;
      background-color: #1B1464;
      background-repeat : repeat;
      max-width : 870px;
    }
    #navBar
    {
      color: #CEEAEE;
      font-family: sans-serif;
      margin-top: 30px;
      margin-bottom: 0;
      padding: 0;
    }
    #navBar li
    {
      display: inline;
      list-style-type: none;
    }
    #navBar li a
    {
      display: inline-block;
      height: 1.5em;
      color: #CDE2FC;
      padding-top: 0.2em;
      padding-left: 1em;
      padding-right: 1em;
      text-decoration: none;
    }
    #navBar li a:hover {
      color: #0C61C9;
      background-color: white;
    }
    #mainPicture {
      height : 244px;
      width : 870px;
      background-color : #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: 0;
    }
    .contentBox {
      font-family: sans-serif;
    }
    .sidebar {
      float: right; 
      width:370px;
      padding: 10px;
    }
    .innerBox {
      background-color : #ffffff;
      background-image : url(images/content_back.png);
      background-repeat : repeat-y;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom : 1em;
    }
    .agent-block img {
    	border: 1px solid #E5E5E5;
    	padding: 4px;
    	margin: 0 8px 1px 0;
    }
    .slideshow {
    	font-family:Arial, Helvetica, sans-serif;
    	width:336px;
    	height:375px;
    	overflow:hidden;
    	background-color:#000000;
    	color:#FFFFFF;
    	border:5px solid #99CC00;
    }
    .slideshow > ul {
    	margin: 0;
    	padding: 0;
    }
    .slideshow > ul > li {
    	display:inline;
    	margin:0px;
    	padding:0px;
    	font-size:1px;
    	margin-right: -1px;
    }
    .slideshow > ul > li > div {
      display: none;
      text-decoration: none;
      float:left;
    }
    .slideshow > ul > li > div > p {
      font-size:11px;
      text-align:center;
      padding:10px 0px 0px 0px;
      margin:0px;
      color:#FFFFFF;
    }
    .slideshow > ul > li > div > a > img {
    	border:2px solid #FFFFFF;
    	width:332px;
    }
    .slideshow  > ul > li > img {
    	border:2px solid #FFFFFF;
    	margin:0px;
    	padding:0px;
    	width:80px;
    	height:60px;
    }
    /* Shows slides when mouse pointer is over a thumbnail image */
    .slideshow > ul > li:hover > div {
    	display: block;
    }
    /* Highlights the thumbnail image when mouse pointer is over it */
    .slideshow > ul > li:hover > img {
    	border-color:#FF6600;
    }
    .ldpPFHeadline 
    h3{font:10pt; font-weight:bold;}.ldpPropFeatures td{vertical-align:top;margin:0;padding:0 0 10px 0;width:200px;}.ldpPropFeatures ul{margin:0 0 0 15px;padding:0;}.ldpPropFeatures li{margin:0;padding:0;list-style-position:outside;}.ldpSecHeadline{margin:0 0 5px 0;}
    #footer {
      background : url(images/footer.png) no-repeat;
      text-align : center;
      font-size : small;
      font-family : sans-serif;
      color : #010101;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    #footer A {
      color : #010101;
    }

  2. #2
    Join Date
    Feb 2009
    Location
    Victoria, BC, Canada
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    Right before the end of contentBox, put this:
    Code:
    <div style="clear:both;"> </div>
    That should fix it...

    Hope that helps!
    // X96 \\
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  3. The Following User Says Thank You to X96 Web Design For This Useful Post:

    mlegg (05-09-2009)

  4. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    Thank you. I'm a CSS noob and it was driving me crazy. Now would it be easier for me to add clear:both; into my css code for .contentbox and .sidebar?

    Code:
    body {
      margin: auto;
      color : #061c37;
      background-color: #1B1464;
      background-repeat : repeat;
      max-width : 870px;
    }
    #navBar
    {
      color: #CEEAEE;
      font-family: sans-serif;
      margin-top: 30px;
      margin-bottom: 0;
      padding: 0;
    }
    #navBar li
    {
      display: inline;
      list-style-type: none;
    }
    #navBar li a
    {
      display: inline-block;
      height: 1.5em;
      color: #CDE2FC;
      padding-top: 0.2em;
      padding-left: 1em;
      padding-right: 1em;
      text-decoration: none;
    }
    #navBar li a:hover {
      color: #0C61C9;
      background-color: white;
    }
    #mainPicture {
      height : 244px;
      width : 870px;
      background-color : #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: 0;
    }
    .contentBox {
      font-family: sans-serif;
    }
    .sidebar {
      float: right; 
      width:370px;
      padding: 10px;
    }
    .innerBox {
      background-color : #ffffff;
      background-image : url(images/content_back.png);
      background-repeat : repeat-y;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom : 1em;
    }
    .agent-block img {
    	border: 1px solid #E5E5E5;
    	padding: 4px;
    	margin: 0 8px 1px 0;
    }
    .slideshow {
    	font-family:Arial, Helvetica, sans-serif;
    	width:336px;
    	height:375px;
    	overflow:hidden;
    	background-color:#000000;
    	color:#FFFFFF;
    	border:5px solid #99CC00;
    }
    .slideshow > ul {
    	margin: 0;
    	padding: 0;
    }
    .slideshow > ul > li {
    	display:inline;
    	margin:0px;
    	padding:0px;
    	font-size:1px;
    	margin-right: -1px;
    }
    .slideshow > ul > li > div {
      display: none;
      text-decoration: none;
      float:left;
    }
    .slideshow > ul > li > div > p {
      font-size:11px;
      text-align:center;
      padding:10px 0px 0px 0px;
      margin:0px;
      color:#FFFFFF;
    }
    .slideshow > ul > li > div > a > img {
    	border:2px solid #FFFFFF;
    	width:332px;
    }
    .slideshow  > ul > li > img {
    	border:2px solid #FFFFFF;
    	margin:0px;
    	padding:0px;
    	width:80px;
    	height:60px;
    }
    /* Shows slides when mouse pointer is over a thumbnail image */
    .slideshow > ul > li:hover > div {
    	display: block;
    }
    /* Highlights the thumbnail image when mouse pointer is over it */
    .slideshow > ul > li:hover > img {
    	border-color:#FF6600;
    }
    .ldpPFHeadline 
    h3{font:10pt; font-weight:bold;}.ldpPropFeatures td{vertical-align:top;margin:0;padding:0 0 10px 0;width:200px;}.ldpPropFeatures ul{margin:0 0 0 15px;padding:0;}.ldpPropFeatures li{margin:0;padding:0;list-style-position:outside;}.ldpSecHeadline{margin:0 0 5px 0;}
    #footer {
      background : url(images/footer.png) no-repeat;
      text-align : center;
      font-size : small;
      font-family : sans-serif;
      color : #010101;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    #footer A {
      color : #010101;
    }
    Last edited by mlegg; 05-09-2009 at 10:51 PM.

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    Is it OK to bump this? I still need an answer for the above post about putting the code in the CSS file.

    thank you

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •