Jump to content
Sign in to follow this  
hakatours

Content does not dictate height of Main Content Area

Recommended Posts

hakatours

Hi all Just onto my second PP site... What do I need to do to get the page(s) to automatically grow as the content does? When I provide content for my pages and posts, the text continues over the morefoot and footer areas. At the moment I have had to use the following:

#dynamic-content {height:840px;}

Because my sidebars are going into my morefoot area (they overlap it). But this leaves an ugly gap on my main content areas that aren't as full. Any suggestions? I cannot find anything in my current CSS that is making it do this. Thanks!

Share this post


Link to post
Share on other sites
Kate

Hi Ellen, Are you using other custom CSS? Because, "out of the box", it shouldn't do this. Have you tried using a

clear:both

on the footer?

Share this post


Link to post
Share on other sites
hakatours

Not that I'm aware of... but I am new to this! I tried

#footer {clear:both;}

but nothing. If anyone wants to take a look and see if they can tell what's going wrong: www.ellenpickett.com It's barely started tho! Cheers

Share this post


Link to post
Share on other sites
timlinson

the absolute positioning from this rule in your custom code is causing it: ` #sidebar1 { background-color: #297093; color: white; position: absolute; top: 250px; ` `}` delete the position rule and use something like top margin instead to line it up: `margin-top: 74px;`

Share this post


Link to post
Share on other sites
hakatours

Awesome, did not realise absolute positioning did that! Thanks Tim!!

Share this post


Link to post
Share on other sites
timlinson

No problem.. that's a pretty cool twist on the layout.

Share this post


Link to post
Share on other sites
hakatours

Hi Tim - thanks, the same thing happening with my actual page canvas, can u suggest CSS that will stop it whilst ensuring my text stays within the section? If I delete

position: absolute;
and replace it with
margin-top

I then find the text is not the same width as it's background. Thanks!

Share this post


Link to post
Share on other sites
catrina

To clarify: do you want the text column (where your main content area is) to fit the width of the yellow-ish background? Just want to make sure I provide the right fix...


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
timlinson
If I delete position: absolute; and replace it with margin-top I then find the text is not the same width as it's background.
Are you talking about your .mcolumn-pad rule? You can switch to #column-wrap to keep the correct content width (z-index to make the links clickable in the header region): `#column-wrap { position: absolute; top: 0; z-index: 999 !important; }` That might still overflow into the footer after some more posts.. not sure. If so, you'll probably have to use a hackish negative margin, just based on what you're trying to do and the way the divs are set up: `#column-wrap { margin-top: -180px; z-index: 999 !important; }`

Share this post


Link to post
Share on other sites
hakatours

Tried it and all it did was to move the whole page across to the right (so the cream canvas was centered in the screen), and the text etc still overflowed into the footer. At the moment the CSS I has is governing the canvas as thus:

#page-canvas {
	border-radius:30px;
	width:600px !important;
	position:relative;
	right:180px;
	box-shadow: 0 0 10px #040404;
	}
I need to get rid of the relative position to allow the text to flow onwards. I tried the following code:
#page-canvas {
	border-radius:30px;
	width:600px !important;
	position: absolute;
	right:550px;
	box-shadow: 0 0 10px #040404;
	}

Alas, the footer then became weird (moved high up the page!) AND the text was still unchanged. Open to more suggestions?! Here's a page to use for example - I've stuck a load of videos in so you can see how it goes over the footer. http://www.ellenpickett.com/portfolio/video-editing/

Share this post


Link to post
Share on other sites
Kate

Hi Ellen, Any time you use "position:absolute" this is going to happen, because it takes the element out of the flow of the page. I know when you're developers are first starting out it's very common, because you can get the desired layout you want, or at least seem to get it. But, it's not (generally) a good idea for layouts. Floats, margins, and some sweat can usually get you the desired layout. ;) So, in this case, commenting out or removing this style should get you what I believe you're going for:

.mcolumn-pad {
	position: absolute;
	top: 0px;
	}

I noticed the videos in the column shifted, so you may need to tweak it. But, it will get you on the right road.

Share this post


Link to post
Share on other sites
hakatours

Thanks Kate, that's got it! Sweat indeed! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×