CSS - 3 Col Layout: Content In 3rd Col Pushed Down

Hi.

Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px).

I cannot find any mention of this space in the stylesheet.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png

In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side.

Here is my HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

Here is my CSS:

Code:

#slideshow-controlsx {
    position: relative;
    height: 14px;
    margin: 0px 0 -58px;
    overflow: hidden;
    z-index: 100;
    text-align: left;
	top:200px;
}

#main-image-container > #slideshow-controlsx {
    margin-bottom: -50px;
	margin:0 auto;
}

#slideshow-controlsx ul {
    position: relative;
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none inside;
	width:690px;
   /* background-color: #000;*/
 /*   opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#slideshow-controlsx button {
    width: 8px;
    height: 14px;
    /*margin: 0;
    padding: 0;*/
  /*  background-color: #000;*/
  	padding:0px;
    border: none;
    text-align: center;
    cursor: pointer;
}

Can anyone help me out with this please? Its driving me nuts!

James

My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this?

Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13

If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this:

Code:

  <div id="main-image-container">
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blank.png"}"
      alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
    </div>

Hi,

I think I know the problem, or at least one of the problems.

The arrows are actually sitting inline with the main image, not behind. As a result they are forcing the main image off to the right side.

Here is the code:

Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blankx.png"}"
      alt="{g->text text="."}" id="main-image" /></p>
    </div>
    {/if}

Here is an image showing the problem:


Im sure there is code to make them sit on top of each other, is it something to do with the overflow or position: relevant tag?

Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added

min-width: 800px

to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content.

Site: Diablo 3 Kore - Please google it - [can't link yet]

CSS:

/* Content */
#fw-bigcontain {padding: 3px; min-width: 800px; float:right;}
#fw-columnContainer {}
#fw-mainColumn {margin: 0px;}
#fw-paragraph {}
.fw-paragraphtop {}
.fw-text {}
h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';}

/* Sidebar */

#fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;}
#fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;}
#fw-sidebar li {}
.hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';}

/* end sidebars */

I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you.

IE CSS Problem. sidebar getting pushed to bottom...



I'm working on my new blog. Moding a template from wpdesigner.com

http://www.mymovetoeurope.com/

The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed.

I tried using absolute positioning for the right bar, but it didn't do anything.

When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header.

Can someone tell me what's wrong?

Thanks.

Hello. I have a page that has 3 main elements: a left nav menu (with float:left), a main contents section (with margin-left: 250px, and lines up beside the left nav menu), and a links section which embeds inside the content section. In IE7 and Firefox, the page displays correctly. In IE 6, the links section displays inside the content section, but the top of the links section lines up with the bottom of the left menu. What would cause this?

I have a header box contained within a "wrap" box in the usual IE kludge to get it to deal with padding and centering consistently. When the page loads, I can see a small (approx 50px) blue-outlined box flash up. My header is specified as 738px wide, not about 50px, but it is blue-bordered. Wrap has no border.

In Firefox, the weird box then moves to the top of the screen, and things load as they should. The box disappears under the other elements.

In Blogger (this is actually a Blogger template), the small box first appears about half an inch down the screen, and then the page loads from that point down, and I'm left with half an inch of background I don't want. (page is he http://acid-test.blogspot.com if you'd like to see what I mean.) The behavior seems to be the same in IE. The little box disappears, as in Firefox, but seems to set the top of the page in some strange way.

Is there a command I can use in the stylesheet to force the elements to move to the top of the page? Is there any way I can find out what the weird little box is? And get rid of it? Does anyone have a clue what's going on? I sure don't.

Thanks for any help you folks can give me!

On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to.

On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading.

I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing?


THe HTML:
Code:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title>  <link href="menu.css" rel="stylesheet" type="text/css" />  <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head>  <body>  <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu">     <li><a href="../Library/index.html">Home</a>       </li>     <li><a href="../Library/about.html">About</a></li>     <li><a href="../Library/contact">Contact Us</a></li>     <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a>       <ul>         <li><a href="#">Condition-Specific Treatments</a></li>         <li><a href="../Library/facials">Facials</a></li>         <li><a href="#">Home Care</a></li>         <li><a href="#">Lash and Brow Tinting</a></li>         <li><a href="#">Lash Extensions</a></li>         <li><a href="#">Makeup Application</a></li>         <li><a href="#">Permanent Makeup</a></li>         <li><a href="#">Skin Growth Removal</a></li>         <li><a href="#">Tattoos</a></li>         <li><a href="#">Tattoo Removal</a></li>         <li><a href="#">Waxing</a></li>         </ul>       </li>          <li><a href="#">Testimonials</a></li>     <li><a href="#">FAQs</a></li>        </ul></div><!-- #EndLibraryItem --><div id="foot"><ul>     <li>Patsy Keim       </li>     <li>1395 Sattler Road Suite #2</li>     <li> Canyon Lake Professional Building       </li>     <li>Canyon Lake, TX 78132       </li>     <li>830 964-4315<br />       <a href="contact.html">Contact Us</a>       </li>   </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>.        <!--end of foot div--></div>   <div id="top"></div>   <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs-->     <h1>Permanent Cosmetics</h1>     <p>See also <a href="faq.html">FAQs</a>.</p>     <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p>     <p>Call 830 964-4315 today for your free consultation!</p>     <h3>A Brief History of Permanent Cosmetics</h3>     <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p>     <h3><br />     Safety and Comfort Concerns</h3>     <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p>     <h3>Some Permanent Cosmetic Options</h3>     <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p>     <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p>     <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p>     <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2>  </div>   <div id="leftimagepermanentmakeup"></div>   <!--end of text div--> </div>   </body> </html>

Here's the css:
Code:

@charset "utf-8"; /* CSS Document */ html { 	text-align: center; }  body { 	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 	text-align: center; 	margin: 0px; 	padding: 0px; } #content { 	position:relative; 	min-height:852px; 	z-index:1; 	background-image: url(images/bgdouble.jpg); 	background-position: right top; 	border: thin solid #E8D7B9; 	text-align: center; 	margin: auto; 	width: 1000px; 	background-repeat: repeat-y; } #text { 	top: 212px; 	border: medium none #069; 	position: absolute; 	height: 103px; 	width: 630px; 	text-align: justify; }  #top { 	position:relative; 	width:1000px; 	height:215px; 	z-index:2; 	background-image: url(images/top.png); 	background-repeat: no-repeat; 	top: 30px; 	margin-top: 0px; 	margin-right: auto; 	margin-bottom: 0px; 	margin-left: auto; }  #leftimage { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/PerfectSkin1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; } #leftimageabout { 	position:absolute; 	width:250px; 	height:400px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-color: #FFF; 	text-align: left; 	list-style-image: url(images/flowerbullet.png); } #leftimagefacials { 	position:absolute; 	width:250px; 	height:700px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/facial.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagehomecare { 	position:absolute; 	width:250px; 	height:212px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/skincondition1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagemakeup { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/clientphotos/makeup1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimageskintreatments { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/SkinProblem1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagestattoos { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/tattoo1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagefaq { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/enzymepeel.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagelashandbrow { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/eyelashes1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagepermanentmakeup { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/permanentcosmetics1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #intro { 	position:relative; 	width:auto; 	z-index:3; 	top: -30px; 	margin-top: 0px; 	margin-right: auto; 	margin-left: auto; 	left: 6px; 	padding-left: 5px; 	text-align: justify; 	list-style-position: outside; 	list-style-type: disc; } h1 { 	font-size: 24px; 	font-weight: bold; 	color: #CAA560; 	font-style: oblique; 	letter-spacing: 0.2em; 	text-align: center; } h2 { 	font-size: 16px; 	color: #791B1B; 	font-style: italic; 	letter-spacing: .1em; 	padding-left: 24px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left top; 	height: 23px; } #foot { 	position:absolute; 	width:1000px; 	height:35px; 	z-index:2; 	bottom: -55px; 	padding-bottom: 0px; } #foot ul li { 	display: inline; 	list-style-type: disc; 	padding-left: 25px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left; } #middle { 	position:absolute; 	width:383px; 	height:316px; 	z-index:3; 	top: 315px; 	left: 249px; } #underimage { 	position:absolute; 	width:630px; 	height:115px; 	z-index:2; 	top: 630px; } #sb1{ 	width: 1px; 	height: 130px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } 	 #sb2 { 	width: 225px; 	height: 400px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } #sbr1{ 	width: 375px; 	height: 130px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } 	 #sbr2 { 	width: 375px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr3 { 	width: 375px; 	height: 20px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr4 { 	width: 400px; 	height: 120px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr5 { 	width: 325px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr6 { 	width: 375px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr7 { 	width: 475px; 	height: 180px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr8 { 	width: 365px; 	height: 85px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr9 { 	width: 350px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr10 { 	width: 375px; 	height: 2455px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sb2homecare { 	width: 225px; 	height: 230px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); } #sb2facials { 	width: 225px; 	height: 700px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); }  #sb2makeup { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2skintreatments { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }#sb2tattoos { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2faq { 	width: 225px; 	height: 315px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }    #sb2lashandbrow { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }  #sb2permanentmakeup { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }         .align-right { float:right; margin: 0 0 15px 15px; }         .align-left { float:left; margin: 0 15px 15px 0; }

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it.

So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work.

Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way.

I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it.

Here's the html:

Code:

<body>

<div id="pagewidth">
	<div id="header"></div>

		<div id="wrapper" class="clearfix" > 
			<div id="twocols" class="clearfix"> 
				<div id="maincol">Main Text, woot. (aka hi hi hi)</div>
				<div id="rightcol">Sidebar, yippee.</div>
			</div> 
		<div id="leftcol">

			<div id="navigation">test</div>
		</div>
	</div>
		
	<div id="footer"></div>
</div>

</body>

and the CSS:

Code:

html, body
{
 background: #333399;
 margin:0; 
 padding:0; 
 text-align:center;
 font-family: Verdana, Arial, Tahoma;
 font-size: 12px;
 font-weight: normal;
 color: black;
 	 
} 
 
#pagewidth
{ 
 width: 750px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;
 background: #333399 url('images/bodycontent.gif') repeat-y center top;
} 
 
#header
{
 position:relative; 
 height:138px; 
 background: url('images/header.gif') center;
 width: 100%;
} 
 
#leftcol
{
 width: 118px; 
 float: left;
 left: 25px;
 position: relative; 
 background-color: transparent;
 margin:0; padding:0;
 }
 
#twocols
{
 width: 700px; 
 float: right; 
 position: relative; 
  }
 
#rightcol
{
 width:180px;
 right: 25px;	 
 float:right; 
 position:relative; 
 background-color: transparent;
 }
 
#maincol
{
 background-color: transparent;  
 float: left;
 left: 100px; 
 display: inline; 
 position: relative; 
 width: 390px; 
 }
 
#footer
{
 text-align: center;
 height:39px;
 background: url('images/footer.gif');
 clear:both;
 } 
 


.clearfix:after 
{
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

Again, thank you in advance if you can come up with anything.

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.