MyBB Community Forums

I was wondering is there anyway to stop this from happening? I've added the following code to my footer css to keep it in the width with the rest of my forums layout but if i re-size my browser window it goes all different widths, is there anyway to keep it at the same width through any re-size? 

clear: both;
    width: 83.7%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto auto;

Problem: 



forum url: http://forumauthority.com/mybb/

you have alot of width set in content, footer and foot
just set 1 to all?? i mean the same width to all like 84%

(2015-12-03, 07:28 PM)subzr1 Wrote: [ -> ]you have alot of width set in content, footer and foot
just set 1 to all?? i mean the same width to all like 84%

I'll give it a go, last time i tried, they weren't all the same width for some odd reason

Not sure if this is the easiest or best way but it works.

First you should separate the div "lower" from your footer so it's no longer its child element. Then move both "footer" and "lower" inside the "container". Container should now be the parent element of content, footer and your lower footer.

Looks something like this:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
   <div class="lower"></div>
</div>

Then copy the styling from "content" to both of your footer elements. I tested with this and seemed to be fine.

#footer {
	clear: both;
	width: 85%;
	padding: 0px 19px;
	background: #EAEAEA;
	border-left: 1px solid #EAEAEA;
	border-right: 1px solid #EAEAEA;
        min-width: 970px;
        max-width: 1500px;
        margin: auto auto;
}

.lower {
    color: #FFF;
    width: 85%;
    margin: auto;
    padding: 8px 19px 6px 19px;
    overflow: hidden;
    font-size: 12px;
    font-family: sans-serif;
    background: #0087AE;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #0087AE;
    border-right: 1px solid #0087AE;
    min-width: 970px;
    max-width: 1500px;
}

(2015-12-03, 07:41 PM)Jackie Wrote: [ -> ]Not sure if this is the easiest or best way but it works.

First you should separate the div "lower" from your footer so it's no longer its child element. Then move both "footer" and "lower" inside the "container". Container should now be the parent element of content, footer and your lower footer.

Looks something like this:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
   <div class="lower"></div>
</div>

Then copy the styling from "content" to both of your footer elements. I tested with this and seemed to be fine.

#footer {
	clear: both;
	width: 85%;
	padding: 0px 19px;
	background: #EAEAEA;
	border-left: 1px solid #EAEAEA;
	border-right: 1px solid #EAEAEA;
        min-width: 970px;
        max-width: 1500px;
        margin: auto auto;
}

.lower {
    color: #FFF;
    width: 85%;
    margin: auto;
    padding: 8px 19px 6px 19px;
    overflow: hidden;
    font-size: 12px;
    font-family: sans-serif;
    background: #0087AE;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #0087AE;
    border-right: 1px solid #0087AE;
    min-width: 970px;
    max-width: 1500px;
}

Thank you i got it working for the footer css, but not so much the lower

Your class="lower" div seems to still be a child of footer. Delete that and paste it back after the close tag for "footer"

(2015-12-03, 08:15 PM)Jackie Wrote: [ -> ]Your class="lower" div seems to still be a child of footer. Delete that and paste it back after the close tag for "footer"

Perfect, thank you! +1 reputation