Column Content Flooding on 2-column Layout

HTML & CSS
1

Hello all,

I have a problem with this 2-column layout that I want to use on a landing page. The right column content floods in on the left when I shrink the browser window. It should be a pretty basic issue, but I’m befuddled:goof: at the moment. The markup structure is pretty much the same as the landing pages we’ve discussed in the recent past.


<!-- columns and article content below this line -->
                    <div id="leftcol">
                            <img src="onlineguitarlessons1.jpg" title="Play Me, Please" alt="The acoustic guitar sits in with the boxed wood." width="300" height="270" />
                    </div>

                    <div id="rightcol"><!-- begin right column -->
                    	<div class="listwrapper">
                    		<p class="hazard">Warning: Do not hire a private instructor until you check out the alternatives online.</p>
                        	<p class="articletext">So, you haven&apos;t quite figured out how to learn to play guitar. You need a solution that can help with the following:</p>
                        	<ul>
                           		<li><span class="bold">Optimized practice sessions</span></li>
                            	<li><span class="bold">Special exercises</span></li>
                            	<li><span class="bold">Technique drilling</span></li>
                            	<li><span class="bold">Extra tools</span></li>
                            	<li><span class="bold">How to read tablatures &amp; music</span></li>
                        	</ul>
                        </div>
                            
                        <div class="box">
                            <h2>GuitarTricks</h2>
                            <img src="guitartrickslogo2.jpg" title="GuitarTricks" alt="On-line guitar lessons with GuitarTricks." width="110" height="110" />
                        	<p>This online guitar learning system was started in 1998. Not only are there hundreds of song tutorials and technique videos from at least 30 professional instructors, but there are a bunch of extra tools available that help get the most out of every time you sit down to jam... <a class="readmore" href="guitartricksreview1.html">Read More</p><br />
                            <a class="visitlink" href="#">Visit GuitarTricks</a>
                    	</div>
                            
                        <div class="box">
                            <h2>Jamorama</h2>
                            <img src="jamlogo2.jpg" title="Jamorama" alt="Mark McKenzie is the founder of Jamorama." width="100" height="117" />
                            <p>Mark McKenzie founded Jamorama in 2003, and since then, over 250,000 have become students from all different parts of the world. Along with the team of instructors, you will have the tools needed to learn how to rock... <a class="readmore" href="jamoramareview1.html">Read More</a></p><br />
                            <a class="visitlink" href="#">Visit Jamorama</a>
                        </div>
                    </div><!-- end right column -->            
<!-- end column layout -->

the styles:


/* lines 113-116, lp2column.css */
#leftcol{float:left; width:50%;}
#rightcol{overflow:hidden; border:3px thick #C66; width:50%; float:right;}

#leftcol img, #rightcol img{border:3px inset #000;}

/* lines 201-207 */
.box{margin:10px 0 0 0; border:2px groove #757575; padding:14px 0 6px 6px;}
.box img{float:right; border:none;}
.box p{text-align:left; clear:left;}
.box a{color:#393;}
.box a:hover{color:#3C0; text-decoration:none;}
a.readmore{font-size:.8em;}
a.visitlink{margin-left:2em;}

To success,

Tyler

2

The image is a fixed size. Remove the width and height setting on the image, or override it with CSS. E.g.

#leftcol img, #rightcol img {
border: 3px inset #000;
[COLOR="#FF0000"]max-width: 100%;
height: auto;
box-sizing: border-box;[/COLOR]
}
3

Interesting reply, Ralph. I went and looked up that box-sizing property.

The behavior of the columns is better, though not what is desired. When the viewport width is shrunk down considerably, the box still floods in to the border of the photo on the left and the bulleted list styles come in even further on the left column. Neither adding just a tad bit of margin or padding to #rightcol worked. It actually sent the entire right column down below the image.

I updated the page so you can see what it is doing.

4

Actually, your reply is the fix. I adjusted the max-width down to 90%, targeting #leftcol img, #rightcol img and everything seems great!

5

Hi, Ty.

Try this adaptation of Ralph’s code:


#leftcol {
    float:left;
    width:49.5%;
}
#rightcol {
    float:right;
    width:49.5%;
    border:3px thick #C66;
    overflow:hidden;
}
#leftcol img,
#rightcol img {
    border:3px inset #000;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    max-width:100%;
    height:auto;
}
6

Hm… they both work very well. I think my original idea has a flaw though. When the browser is skinny, the 2 boxes are just way too skinny. I think I may just add more text to the first paragraph and float the image like before and just have the boxes below it.

7

Go ahead and set it up in the conventional style, then let’s see what we can do with it. :slight_smile:

8

I think this is a good copy to run with:

da page


/*Box for holding little preview snippets*/
.box{margin:15px 2% 0 2%; border:2px groove #757575; padding:14px 0 6px 6px; width:95%;}
.box img{float:right; border:none; padding:0 5px;}
.box p{text-align:left; clear:left;}
.box a{color:#393; margin-left:2em;}
.box a:hover{color:#3C0; text-decoration:none;}
a.readmore{font-size:.8em; margin-left:0;}
/* end boxes, captions */

Simple. Looks good.

9

Wow. This looks really nice, Ty. Are you sure that you want this configured in two columns? The only thing I would do with this layout is add a little line height to the paragraphs within the lower boxes… 1.3 - 1.4 maybe. Personally, I don’t think a two column layout would be an improvement. This layout visually tracks very well.

I’ll give the two column code a try because you have such a creative imagination for design and you may be able to use it later, but I don’t believe it will help here. This looks good and flows nicely.

Cheers.

10

Yes, I agree, and there’s no one that helped me accomplish more than you, Ralph, Paul O’B, and others… :cool:

This is probably the best web content I have so far, and I have another design that looks like notebook paper (without the blue lines), which I think is even better. This layout works just fine.

I started to make graphics for the home page to have a responsive design. That’s what I need to do next.