can't clear a float, help please!!

  • I’m trying to build a layout based on the Whiteboard starter theme. Something went wrong there, because by default the sidebar was displayed below & to the right instead of besides the actual content. I had to use postiton:absolute to make it actually float where it should. But now that it is absolute, the footer ignores the sidebar and the two get jumbled up. I tried to clear the float and make the footer appear underneath in a 1000 different ways and nothing seems to work… guess this should be an easy one, but I really don’t know what to do any more!
    Here’s the css code as of now:

    #content {
		position:relative;

	}

#front-content{
        float:left;
	margin-right:33%;

	}
    #sidebar {
	    position:absolute;
		float:right;
		left:67%;
		max-width: 33%;
					}
	#footer .container {
		margin: 0 auto;
		clear: both;
	}

    Also, If I only specify float:right without left:67%, the sidebar moves all the way to the left and jumbles with front-content AND the footer. I tried displaying the elemnts as blocks as well, to no effect.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hey nuufu —?should be able to easily help, but it will be difficult without seeing it. Post a link and we’ll take a look.

    Thread Starter nuufu

    (@nuufu)

    I’m sorry, but I’m testing locally, so can’t provide a link… If there is any other other information that could be helpful I’d be glad to give it!

    humm…..a screenshot then maybe?

    Thread Starter nuufu

    (@nuufu)

    OK, I’ve made some screenshots, hope these help to locate the problem. The first one shows the sidebar colliding with the footer and the second one shows what happens if I don’t set the sidebar to absolute.
    https://s1.directupload.net/images/131028/7a8eabwi.jpg
    https://s14.directupload.net/images/131028/iu7mdrvw.jpg

    Really tough without seeing the actual code, but a clearfix should fix the issue in the first screenshot. https://css-tricks.com/snippets/css/clear-fix/

    After that, you’ll want to float things next to each other, rather than using position: absolute. the basic structure will look something like this:

    .container ( class clearfix; width: 100px )
    .content ( float: left; width: 600px )
    .sidebar( float: left; width: 400px )

    That’s all fake code of course, but should give you the idea. Feel free to make a Codepen and I can help you with the general idea over there.

    Terry

    Thread Starter nuufu

    (@nuufu)

    I tried various clearfix methods before and they didn’t work. Not sure whether I was doing it right though. So #content (the parent element) gets and additional .clearfix class and the rest (like :before and :after) is simply defined in the css, right? Actually, I don’t need the clearfix if I don’t use the absolute value. But if I use the normal way of positioning the floated elements (like you have suggested above), that always results in the second issue… Does it maybe have to do with the fact that the layout is responsive?

    Hey nuufu

    This should help get you started. https://codepen.io/saltcod/pen/doiCl

    Play around with that. It’s got all the basics you need—?floats and clearfixing.

    Good luck!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘can't clear a float, help please!!’ is closed to new replies.