Inspiring

Question

Problem With Footer CSS

Forum|Forum|3 years ago
April 24, 2022
3 replies
693 views

Hi Guys,

I'm having a CSS issue. I'm trying to split the footer of my web page into sections. The left footer and the center footer are falling into line but the right footer acts like it's ignoring the CSS completely. I can't see it. Hoping someone here will spot my mistake. I'm aware that there are other issues with the footer that need addressed but right now I only care about the right footer issue. Any help you can provide is appreciated. Here's the HTML and CSS.

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
    <div id="wrapper">
        <div id="headerwrapper">
        <div id="header">
            <p>This is the Header</p>
        </div>
        </div>
        <div id="navigationwrapper">
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        </div>
        <div id="leftcolumnwrapper">
        <div id="leftcolumn">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
        </div>
        </div>
        <div id="contentwrapper">
        <div id="content">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p><p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p><p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
        </div>
        </div>
        <div id="rightcolumnwrapper">
        <div id="rightcolumn">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
        </div>
        </div>
        <div id="footerwrapper">
        <div id="footer">
			<section id="leftfooter">
			This is the Left Footer
			</section>
          <section id="centerfooter">
            This is the Center Footer
          </section>
		 <section id="rightfooter">
            This is the Right Footer
          </section>			
        </div>
        </div>
    </div>
</body>
</html>

@1552174 url("reset.css");
@import url("colors.css");
@import url("fonts.css");

html {
	border-radius: 10px;
	border: 1px solid;
	margin: 2px;
}

body {
    
}

p {
    padding: 10px;
}

#wrapper {
    margin: 0 auto;
    width: 2000px;
}

#headerwrapper {
    width: 2000px;
    float: left;
    margin: 0 auto;
}

#header {
    height: 75px;
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#navigationwrapper {
    width: 2000px;
    float: left;
    margin: 0 auto;
}

#navigation {
    height: 40px;
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#contentwrapper {
    width: 1400px;
    float: left;
    margin: 0 auto;
}

#content {
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#leftcolumnwrapper {
    width: 300px;
    float: left;
    margin: 0 auto;
}

#leftcolumn {
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#rightcolumnwrapper {
    width: 300px;
    float: left;
    margin: 0 auto;
}

#rightcolumn {
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#footerwrapper {
    width: 2000px;
    float: left;
    margin: 0 auto;
    clear: both;
	display: inline;	
}

#footer {
    height: 40px;
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#leftfooter {
    height: 40px;
	width: 300px;	
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
	display: inline-block;
}

#centerfooter {
    height: 40px;
	width: 1400px;	
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
	display: inline-block;
}

#rightfooter {
    height: 40px;
	width: 300px;	
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
	display: inline-block;
}

This topic has been closed for replies.

Nancy OShea

Community Expert

To add to what's been said by @BenPleysier and @osgood_ , the HTML5 shiv is obsolete and should be removed from your code. Google returns a 404 (Not Found)!! error.

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Background: The shiv was used in 2008 to force inferior browsers of the day to accept HTML5 syntax. But those browsers are long gone. Current browsers understand HTML5 without the need for fallbacks.

Nancy O'Shea— Product User & Community Expert

V

VShaneCurtisAuthor

Inspiring

Thanks for the help. Am aware of this and is NOT what I posted about.

O

osgood_

Legend

As Ben has said already - you're really going about this incorrectly. Setting specific widths and using display: inline-block will result in additional widths being added to the containers, therefore they will exceed the width of their parent container which has been set at a specific width. The last container doesnt fit and will find the next available space where it can fit in.

The best methods to use these days are flex and grid. Ben has already given you a solution using flex. Below is a solution using grid:

#footerwrapper {
border:	1px solid #000;
padding: 5px;
width: 2000px;
margin: 0 auto;
}
#footer {
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: 40px;
gap: 5px;
}
#leftfooter {
border-radius: 10px;
border: 1px solid;
}
#centerfooter {
border-radius: 10px;
border: 1px solid;
}
#rightfooter {
border-radius: 10px;
border: 1px solid;
}
</style>
</head>
<body>
	
	
<div id="footerwrapper">

<div id="footer">

<section id="leftfooter">
This is the Left Footer
</section>

<section id="centerfooter">
This is the Center Footer
</section>

<section id="rightfooter">
This is the Right Footer
</section>

</div>

</div>

Use either solution or you can just set your footerwrapper div to something more than 2000px to account for the extra width created by the child elements.

Infact these days you should not be setting specific widths for the parent containers as it restricts the websites ability to be responsive on mobile devices, all of which have different widths, so you should be setting widths in percentages or something which is flexible.

V

VShaneCurtisAuthor

Inspiring

I'm not familiar with grid and am trying to stick to coding that is familiar to me.

O

osgood_

Legend

I'm not familiar with grid and am trying to stick to coding that is familiar to me.

By @VShaneCurtis

Ok, well your current set up is being affected by what is called the box-model where border widths are added to the width of the containers, so your containers that are 300px wide are really 302px wide and your container that is 1400px wide is really 1402px wide. Already your containers are accumulatively 6px too wide to fit in their parent container side by side. Then you need to factor in your margins which add an extra 12pxs to the overall width. Then using display: inline-block; adds additional width.

Instead of using display: inline-block; use float: left;

Your #centerfooter container AFTER the additional default border and margins widths have been calculated should be: 1382px NOT 1400px

Better still have the broswer calculate the width

width: calc(100% - 618px);

Of course you can use box-sizing: border-box; to take care of the borders and padding if you are planing to use any padding as that then adds the extra widths to the inside of the containers NOT the outside of the containers BUT you still need to factor in the extra width the margins will consume.

So you see the old method of doing what you want is a PITA as opposed to new methods like flex and grid which make it dead easy.

BenPleysier

Community Expert

Change the style rules for the footer to read:

#footer {
    height: 40px;
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#leftfooter {
    height: 40px;
	width: 300px;	
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

#centerfooter {
    height: 40px;
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

#rightfooter {
    height: 40px;
	width: 300px;	
    border-radius: 10px;
    border: 1px solid;
    margin: 2px;
}

If you allow me to make a few remarks without you feeling belittled:

Do not use set values for width and height unless absolutely neccessary. This will help you when you create a responsive design.
For the layout, use Flexbox. You could use CSS Grid, but in this case it may be an over kill.

For more on Flexbox, use Bing to search the subject. One such a search gave me https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: This is the definition of a `section` element:

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

For more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

V

VShaneCurtisAuthor

Inspiring

Ben

Thank you for you comments. They are appreciated and I don't feel belittled because you were respectful in presenting them. I'm not a wiz at HTML and this is a learning exercise for me. I know the design is ridgid because I am not fully familiar with responsive CSS coding technigues. That comes next. Thanks for the help.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded