Good morning!
I'm new to this forum and I was hoping to acquire a little bit of help.

I am in the process of updating my web site and came across a slight problem with two parts (thus far).

1) I want a horizontal rule to go across the div beneath the title text of a paragraph. I managed to get it beneath the text, but it will not extend past (see here - I'm referring to the pink rule beneath "Avalon Reptiles" for example).

2) Also on that page I appear to be having a problem with something causing the horizontal browser scroll bar to appear. I can't seem to locate what exactly is causing the problem. It's not on any other pages, so I imagine it's something to do with the CSS directly related to the portfolio section.

Any and all help will be much appreciated. Thanks!

Heya,

I am working form a very bad laptop at the moment (have come home for the holidays) but I will try and help.

1) If the div is a child of the box then it should be a simple case of setting its width to 100% in the stylesheet.

2)Check your margins and padding, usually these are responsible for unwanted scrolling.

Jamie

For the title section, code is as follows...

CSS

.portheader {
    width:100%;
    border-bottom:2px solid #ED1878;
    padding:10px 0pt 4px;
    font-size: 16px;
}

HTML

<span class="portheader">Avalon Reptiles</span>

I went through and changed all of the padding to 0 to see if that was the problem causing the horizontal rule, and that's not it...

CSS

.maincontenttext {
    width:800px;
    padding:20px;
    font-family: "Century Gothic", Futura, Arial;
    font-size: 14px;
    color: #FFFFFF;
    text-align: justify;
}
.portheader {
    width:100%;
    border-bottom:2px solid #ED1878;
    padding:10px 0pt 4px;
    font-size: 16px;
}
.leftport {
    float:left;
    width: 460px;
    padding:0px;
}
.leftportcon {
    width: 460px;
    height: 150px;
    padding:10px;
    font-size: 12px;
    text-align: left;
    border: 3px dotted #ED1878
}
.leftportcon2 {
    width: 486px;
    height: auto;
    padding:0px;
    text-align: justify;
}
.rightport {
    float:right;
    width: 300px;
    height: auto;
    font-size: 12px;
    text-align:justify;
    line-height:20px;
}

HTML

<div align="center" class="maincontent">
    <div class="maincontenttext">
        <div class="leftport">
        <div class="leftportcon"><span class="portheader">Avalon Reptiles</span><br /><br />
          <img src="images/portfolio/websites/avalonreptileswebsite1.jpg" alt="avalon reptiles" width="150" height="113" border="1" align="left" /> <a href="http://www.avalonreptiles.com"><img src="images/portfolio/websites/avalonreptileswebsite2.jpg" alt="avalon reptiles" width="150" height="113" hspace="10" border="1" align="left" /></a>&bull; Design<br />
          &bull; HTML Programming<br />
          &bull; Submittal E-mail Form<br />
          &bull; SEO</div><br />
        <div class="leftportcon"><span class="portheader">Baxter Excavation</span><br /><br />
          <a href="images/portfolio/websites/baxterexcavation.html"><img src="images/portfolio/websites/baxterexcavationflashintro1.jpg" alt="baxter excavation" width="150" height="113" border="1" align="left" /></a> <a href="images/portfolio/websites/baxterexcavation.html"><img src="images/portfolio/websites/baxterexcavationflashintro2.jpg" alt="baxter excavation" width="150" height="113" hspace="10" border="1" align="left" /></a>&bull; Design<br />
          &bull; Flash Programming</div><br />
        <div class="leftportcon"><span class="portheader">BY Jazz</span><br /><br />
          <a href="http://www.brennanyetterjazz.com"><img src="images/portfolio/websites/byjazzwebsite1.jpg" alt="by jazz" width="150" height="113" border="1" align="left" /></a> <a href="http://www.brennanyetterjazz.com"><img src="images/portfolio/websites/byjazzwebsite2.jpg" alt="by jazz" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; HTML Programming<br />
&bull; Submittal E-mail Form <br />
&bull; Video &amp; Audio <br />
&bull; SEO</span></div><br />
        <div class="leftportcon"><span class="portheader">Cave Gecko Forums</span><br /><br />
          <a href="http://www.cavegeckoforums.com"><img src="images/portfolio/websites/cavegeckoforumsweb1.jpg" alt="cave gecko forums" width="150" height="113" border="1" align="left" /></a> <a href="http://www.cavegeckoforums.com"><img src="images/portfolio/websites/cavegeckoforumsweb2.jpg" alt="cave gecko forums" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; vBulletin</span></div><br />
        <div class="leftportcon"><span class="portheader">Cornsnake Morph Gallery</span><br /><br />
          <a href="http://www.cornsnakemorphgallery.com"><img src="images/portfolio/websites/cornsnakemorphgalleryweb1.jpg" alt="cornsnake morph gallery" width="150" height="113" border="1" align="left" /></a> <a href="http://www.cornsnakemorphgallery.com"><img src="images/portfolio/websites/cornsnakemorphgalleryweb2.jpg" alt="cornsnake morph gallery" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; vBulletin</span></div><br />
        <div class="leftportcon"><span class="portheader">Florida Redtails</span><br /><br />
          <a href="http://www.floridaredtail.com"><img src="images/portfolio/websites/floridaredtailwebsite1.jpg" alt="florida redtails" width="150" height="113" border="1" align="left" /></a> <a href="http://www.floridaredtail.com"><img src="images/portfolio/websites/floridaredtailwebsite2.jpg" alt="florida redtail" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; HTML Programming<br />
&bull; Flash Programming <br />
&bull; Submittal E-mail Form <br />
&bull; SEO</span></div><br />
        <div class="leftportcon"><span class="portheader">Jungle Habitat Plastics</span><br /><br />
          <a href="http://www.junglehabitatplastics.com"><img src="images/portfolio/websites/junglehabitatswebsite1.jpg" alt="jungle habitat plastics" width="150" height="113" border="1" align="left" /></a> <a href="http://www.junglehabitatplastics.com"><img src="images/portfolio/websites/junglehabitatswebsite2.jpg" alt="jungle habitat plastics" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; eCommerce</span></div><br />
        <div class="leftportcon"><span class="portheader">MobLife</span><br /><br />
          <a href="http://www.moblife.co.uk"><img src="images/portfolio/websites/moblifewebsite1.jpg" alt="mob life" width="150" height="113" border="1" align="left" /></a> <a href="http://www.moblife.co.uk"><img src="images/portfolio/websites/moblifewebsite2.jpg" alt="mob life" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design</span></div><br />
          <div class="leftportcon"><span class="portheader">Mob Squad</span><br /><br />
          <img src="images/portfolio/websites/mobsquadwebsite1.jpg" alt="mob squad" width="150" height="113" border="1" align="left" /> <img src="images/portfolio/websites/mobsquadwebsite2.jpg" alt="mob squad" width="150" height="113" hspace="10" border="1" align="left" /><span class="maintextjustify">&bull; Design</span></div><br />
          <div class="leftportcon"><span class="portheader">Reptiles by Rekowski</span><br /><br />
          <a href="http://www.reptilesbyrekowski.com"><img src="images/portfolio/websites/reptilesbyrekowskiewebsite1.jpg" alt="reptiles by rekowski" width="150" height="113" border="1" align="left" /></a> <a href="http://www.reptilesbyrekowski.com"><img src="images/portfolio/websites/reptilesbyrekowskiewebsite2.jpg" alt="reptiles by rekowski" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; HTML Programming<br />
&bull; Submittal E-mail Form <br />
&bull; SEO</span></div><br />
            <div class="leftportcon"><span class="portheader">Reptirus</span><br /><br />
          <a href="http://www.reptirus.com"><img src="images/portfolio/websites/reptiruswebsite1.jpg" alt="reptirus" width="150" height="113" border="1" align="left" /></a> <a href="http://www.reptirus.com"><img src="images/portfolio/websites/reptiruswebsite2.jpg" alt="reptirus" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; HTML Programming<br />
&bull; Submittal E-mail Form <br />
&bull; SEO</span></div><br />
            <div class="leftportcon"><span class="portheader">Triple Moons Exotic</span><br /><br />
          <a href="http://www.triplemoonsexotic.com"><img src="images/portfolio/websites/triplemoonswebsite1.jpg" alt="triple moons exotic" width="150" height="113" border="1" align="left" /></a> <a href="http://www.triplemoonsexotic.com"><img src="images/portfolio/websites/triplemoonswebsite2.jpg" alt="triple moons exotic" width="150" height="113" hspace="10" border="1" align="left" /></a><span class="maintextjustify">&bull; Design<br />
&bull; HTML Programming<br />
&bull; eCommerce<br />
&bull; SEO</span></div><br />
          </div>
        <div class="rightport">
          Any one who owns or plans start a business should consider having a web site. A web site is a powerful marketing and advertising tool and a great way to expand your business into other areas. The main benefit to having a web site is that your web site will be open 24 hours a day, 7 days a week. Your web site can serve as a representative that answers questions about your business, offers customer service even when your business is closed and to sell your products and services. We create unique web sites which help you reach the goals that you have for creating an online presence - whether it is for a business or personal use. We strive to create professional web site designs that will effectively promote your business to target your audience and generate sales for you. Our goal is to provide High Quality, Affordable, Custom Design.
          <p>There is more to building a successful web site than learning programs, inserting graphics and text on a page, and calling it a day. To produce a successful  presence online, there are essential elements that are essential to a successful web site.</p>
          <p><strong>Visually Appealing Design</strong><br />
            Online users today are directly affected by visual stimulus. Making a lasting impression on your audience is vital to unleashing the potential of your business. We focus on making your site design professional, attractive and unique.</p>
          <p><strong>Navigation</strong><br />
            If the user can't find the answers they are looking for quickly and easily on your web site, there's a good chance they will move onto the next site. We will suggest the most effective navigational structure for your web site based on the information you want to present and how your customers typically use other sites.</p>
          <p><strong>Site Consistency</strong><br />
            If your web site doesn't have consistency in the design, structure, color and content layout, users will question if they are on the same web site. When someone comes to your web site, they should feel they are within the same web site from start to finish.</p>
          <p><strong>Technology Compatibility</strong><br />
            The internet is changing. Web standards are being changed and many of the existing ways to create a web site will no longer be successfully executed with modern browsers. Don't be caught in a panic when within the next five years your web site will no longer be accessible to your customers.</p>
          <p><strong>Search Engine Optimization</strong><br />
            There is no guaranteed method to rank high in search engines, but there are ways to optimize your web site to increase your site's probability in becoming ranked. We'll do the research and coding necessary to accomplish this without any extra costs.</p>
          <p><strong>Performance</strong><br />
            With high-speed internet, people are impatient in the online world. If your web site takes too long to load, chances are your viewer will leave within seconds of reaching your web site. We are conscious of every bit of space that goes into your web site and find a balance between quality and size.</p></div>
</div>
    <br />
</div>

It's not a good idea to use spans on text to emulate a heading, use the Hx tags as they are meant to be used and style the Hx tag with the CSS rules. Since the Hx tags are block level elements, if you specify a bottom border for it, it will extend across the entire width of it's container.

Using the proper Hx tags is also semantically correct AND you get some points with the search engines - and accessibility.

I don't think you need to worry about the tiny bit of horizontal scroll, there's nothing to the right, all your content falls within the visible viewport.

One other thing - it's not a good idea to size your fonts in px, it prevents people using IE from resizing the text should they choose to do so. Better to use % or em units instead.

I realize the horizontal scroll isn't that huge of a deal, but it bothers me that it's there and I can't find it's source. It been driving me mad for two days!

Is using the <h> tags the only way to stretch that out then? I don't like using them because then I won't remember which are which, but if it's the only way to do it I guess I'll have no choice.

I did switch it to the <h> tags and while it made the vertical rule do what I wanted, it completely through off the rest of my layout.

The fact is that a heading is exactly what you are using, so why not user a heading tag ? Search engines USE the Hx tags so it's a good idea to use them as they are meant to be used. H1 is always your top level, the next level, no matter how many there are, should be h2's, so I'd say on your site those spans should be h2's, every one of them.

I've noticed that your maincontent div is NOT containing the rest of the elements that are inside it, this is due to improperly cleared floats.

The horizontal scrollbar is caused by the footer2, reduce it to 90% and the scrollbar goes away.

Header tags should do NOTHING to your layout at all, unless you've got something else in your layout that's not quite right. In the first box, it appears your float isn't cleared properly, therefore the images are sticking out of the box.

That's odd, how is it the footer causing the horizontal scroll problem when none of the other pages (which has that same footer) has that problem?

Making a blanket statement about "improperly cleared floats" doesn't explain to me what the problem is. Could you please elaborate?

The header tags automatically bold type, how do I get rid of that? I've tried both font-weight:none & font-style: normal to stop it.

Originally Posted by TripleMoons

The header tags automatically bold type, how do I get rid of that? I've tried both font-weight:none & font-style: normal to stop it.

The answer to this question is font-weight:300 (in case anyone else reads this thread). I love Google.

I'm not sure why the footer2 does that on that page, w/o downloading your page and testing the entire layout. I'm not at home and on my laptop, so that's not as easy for me to do right now.

As for the float clearing... when you float an element, you have to clear the float. IE incorrectly 'wraps' elements. For more info on clearing floats, read up on it here:
http://css-discuss.incutio.com/?page=ClearingSpace

The way you have it laid out, the floats under each box should be cleared right after the box itself.'

I've also noticed that your leftportcon is sticking out of the leftport container, and I assume that you've meant the leftportcon areas to be "wrapped" by left port.

Ahhh, I see what you mean about the overflow.

I'm still having the problem with the header (see attached image) and the huge space it left at the top of each box.

I don't expect a reply back today, it's Christmas! Thank you very much for your help, this is my first time doing a table less layout. They taught us tables when I was in college!

Hello Triple & All...

Happy Holidays. I took a look at your site with a technique I sometimes call an "X-Ray" (exposes the hidden CSS framework, or skeleton), which relies on the excellent Firefox extension -- Web Developer. You can read a series of articles about it: FireFox Tricks Articles.

Here's a screenshot with some things you can try based on what I saw:

• Above I used the Web Developer extension to first turn on "Outline Block Level Elements," then I displayed "Element Information" for the heading blocks (h3) in question. Why? I wanted to check the "Ancestors" for ways to reduce padding or margins.
• The red arrow shows the ancestors that are influencing your headings (h3).
• Next I opened "Edit CSS" (shown left above), and looked at a the "leftportcon" styling (an ancestor of h3). You could set the padding for the top of that area to 0 (padding-top: 0px. Leave the other padding the same). It's circled in Red.
• You can also set your padding for the top of your h3 to 0. This with the previous change will save you 20px of space at the top of those headings. Also, circled in Red above left.
• Note that one of the exceptional strengths of working with this extension... is that your CSS changes take immediate effect (temporarily... does not overwrite existing sheet) visually on screen to help you troubleshoot.

Hope that helps you. I recommend you get the Firefox extension (Web Developer), and start using it for diagnosis -- take a look at those X-rays of your Ancestors.

Yours, Scott

Well that's a neat tool!

Knocking that padding out of those sections did take a good bit of that space out, but not quite enough. I tried a negative padding, but that didn't do anything.

Out of curiosity, is the thumbnails and related text touching in that view because of the Web Developer tool or because some is wrong with my coding? There should be 5px horizontal space around that 2nd image (which I see in Mac FireFox & Opera).

Make sure you zero out all margins and padding at the very start of your CSS, add it back where you want it.

Hi Triple -

Just saw your question about the "touching" elements in the screenshots above. When using the Web Developer tool it does create temporary movement of elements when you add in/turn on borders around elements, and the yellow labels for divs and elements. These are only in effect while you use the Web Developer tool for analysis.

Yours -
Scott

If you also use the FIREBUG extension, between the 2 you'll have a super debugging setup.

I've had Aardvark and Firebug installed. I really like this Web Developer tool. Short cuts a lot of things!