Menu icon Foundation
Full width row / section

Sorry, I realise this has come up before, but have seen a few angles on it, and not sure which will work the best.

I'm basically just looking at having a fairly standard full width large footer area at the bottom of my pages.

I have gotten as far as creating the full width row on the page below:

http://www.safarilink.com/about/index101.php

Using the CSS:

.fullWidth {
   	width: 100%;
   	margin-left: auto;
   	margin-right: auto;
 	max-width: initial;
	background-color:#2F2F2F;
	padding-top:20px;
	padding-bottom:100px;
	color:#FFFFFF;
}

And HTML:

 <div class="row fullWidth">
    <div class="row">
      <div class="large-12 columns">
      Full width column here...
      </div>
    </div>
 </div>

 

So the only thing I'm not sure of is entering the content of the row to match the regular width rows / sections. I know I can add % to the left and right padding, but it doesn't remain in line with the other sections when the page is resized.

What is the best way to achieve this? (I'm wondering if I go down this route I actually might need to just make all the road full width, and just have %s for padding?

Any advice / pointers much appreciated.

Thank you!

 

full width rowcsslayout

Sorry, I realise this has come up before, but have seen a few angles on it, and not sure which will work the best.

I'm basically just looking at having a fairly standard full width large footer area at the bottom of my pages.

I have gotten as far as creating the full width row on the page below:

http://www.safarilink.com/about/index101.php

Using the CSS:

.fullWidth {
   	width: 100%;
   	margin-left: auto;
   	margin-right: auto;
 	max-width: initial;
	background-color:#2F2F2F;
	padding-top:20px;
	padding-bottom:100px;
	color:#FFFFFF;
}

And HTML:

 <div class="row fullWidth">
    <div class="row">
      <div class="large-12 columns">
      Full width column here...
      </div>
    </div>
 </div>

 

So the only thing I'm not sure of is entering the content of the row to match the regular width rows / sections. I know I can add % to the left and right padding, but it doesn't remain in line with the other sections when the page is resized.

What is the best way to achieve this? (I'm wondering if I go down this route I actually might need to just make all the road full width, and just have %s for padding?

Any advice / pointers much appreciated.

Thank you!

 

Tom Dean over 2 years ago

NO! Just add "expanded" class to your row and done. See: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Iain MacDonald over 2 years ago

Thanks Tom - that certainly makes it simpler.

But looking at:

http://www.safarilink.com/about/index101.php

The text in the expanded row appears on the left, rather than in the centre.

I know I can centre the text in the middle of the page, but how can I align it to the left, so it aligns with the main content text on the page, like this:

http://www.safarilink.com/about/index102.php

Iain MacDonald over 2 years ago

If anyone could help out with that that would be appreciated.

Thank you!

Val Ery over 2 years ago

H Iain!

You have done a great job of writing styles!
IMHO: you need to redefine your layout in the following way -

html:

<body>
  <nav class="nav-wrapper">
    <div class="row">
      Navigation here
    </div>
  </nav>
  <main class="main-wrapper">
    <div class="row">
      Content here
    </div>
  </main>
  <footer class="footer-wrapper">
    <div class="row">
      Footer content here
    </div>
  </footer>
</body>

css:

.nav-wrapper, .main-wrapper, .footer-wrapper {
  width: 100%;
}
.row {
  width: 80%; //for example
  max-width: 1440x;
}

Iain MacDonald over 2 years ago

Thanks Val - think I've gotten there in the end. Its great that there are so many different ways to skin a cat with web design, but sometimes its a pain when different methods don't quite seem to do everything you wanted to.

In this case either the footer not sticking to the bottom, or the footer rising up over text, or the footer content not being in the right position within the footer.

The method that seems to be doing everything I needed was this one:

https://css-tricks.com/couple-takes-sticky-footer/

So the page here:

http://www.safarilink.com/about/index801.php

Has the CSS:

html, body {
  	height: 100%;
  	margin: 0;
}
.row {
  	width: 80%; //for example
  	max-width: 1440x;
}
#footer {
	bottom: 0;
	padding-top:20px;
	width: 100%;
	height: 200px; /* choose any height */
	background-color:#515050;
	color:#FFFFFF;
}
.push {
  	height: 70px;
}

  And HTML:

<div class="push"></div>

<div id="footer">
	<div class="row">
	Footer content here
	</div>
</div>

</body>

 

 

Val Ery over 2 years ago

Yeah, Iain! It is for this reason that I am using the Foundation Framework :)

One moment: in my example for the styles I use two slashes as a comment. Remove them (file admintables.css, line 1895)

Iain MacDonald over 2 years ago

Actually, I spoke to soon - it looked OK on my laptop where I was looking at it, but back at the office, I can see that the footer isn't sticking to the bottom of the page after all.

This one has your code:

http://www.safarilink.com/about/index902.php

But how can I get that footer, with the text in that position within the footer, to stick to the bottom of the page?

Iain MacDonald over 2 years ago

OK, think I have it this time, here:

http://www.safarilink.com/about/index805.php

CSS:

html {
	height: 100%;
}
body {
  	min-height: 100%;
  	display: flex;
  	flex-direction: column;
}
.row {
  	width: 80%; 
  	max-width: 1440px;
}
.content101 {
  	flex: 1;
}
.footer_style_1 {
  	background-color: #2A2A2A;
	color:#FFFFFF;
	height:200px;
}
.footer_left {
  	text-align: left;
}
.footer_right {
  	text-align: right;
}

 

HTML:

<footer class="footer footer_style_1">
   
<div class="row">
   <div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_left">
   Footer left content here...
   </div>
   <div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_right">
   Footer right content here...
   </div>
</div>
	
</footer>
   	
</body>

 

Iain MacDonald over 2 years ago

I missed this from the main content HTML, above the footer:

<div class="row content_borderless content101">
Main content here...
</div>

Flex is a new one on me, but it seems to do the job here.

Val Ery over 2 years ago

Hi Iain!
Relatively sticky footer ... This example is suitable? - http://codepen.io/Val_Ery/pen/dvbZVL