Jump to content

HTML5 / CSS3 Float Issue


Andrea

Recommended Posts

:bash: :bash: :bash: :bash: :bash:

 

http://www.aandbwebd...topus/index.php - username: Roatan PW: pelican***

 

section id="content" contains my sections left (the content) and aside (the right side navigation. I want the transparent background image img/green.png to cover the content section so it'll fill the aside part with the transparent image.

 

'left' and 'aside' - are both floating in the content section, so I've added a clear: both to the footer section, which NORMALLY takes care of this. Not this time.

 

I googled and found some info on adding 'overflow: auto' - but when I did that, I ended up with a scrollbar above the footer.

 

I know it's been a while since I built a site --- but did I really get stupid this quick/?? (Don't answer that!!)

 

And while you're there - why won't my images in the 'aside' center even so I added the right/left margin auto? Since they are not all the same size, adjusting margins won't work. I guess I could make the images the same size, but that's a PITA. There has to be a better way.

 

Did I already mention :bash: :bash: :bash::bash: :bash:

Link to comment
Share on other sites

Try this for the float problem, right above your footer in your html put:

 

<div class="clear"></div>

 

and I know I do not have to tell you but for those who may not know the css:

 

.clear {
clear:both;
}

 

For the img problem wrap each of your imgs in a separate div and position the div.

 

Hope this works it has for me in the past with about the same problem.

Edited by grabenair
Link to comment
Share on other sites

Try this for the float problem, right above your footer in your html put:

 

<div class="clear"></div>

 

and I know I do not have to tell you but for those who may not know the css:

 

.clear {
clear:both;
}

 

For the img problem wrap each of your imgs in a separate div and position the div.

 

Hope this works it has for me in the past with about the same problem.

 

Sometimes I find that a div won't work for me but a <br class="clear"> always does.

Link to comment
Share on other sites

I see you added the clear fix. It is in the wrong place. Sorry I should have been more clear. It needs to be right before the opening footer tag. I said you could fix the img position problem by wrapping them in a div. Sorry another my bad, you can do the same by giving the img a id and then setting the right margin until you get the img away from the border. I do apologize I was on phone with my ex-turn early while reading and typing, not at all far to you.

 

<img src="img/facebook.gif" alt="Join us on Facebook" id="faceBookimg"> or something like that

 

I think your html is also wrong, it should be:

 

<section id="content">
       Your stuff in your section left here
     </section> 
     <aside id="right">
     Your side bar stuff
     </aside>
        <div class="clear"></div>
            <footer>
            </footer>

You will have to adjust your top margin on your footer now. Now your content and aside will work just like the old xhtml. Speaking of that, you probably know this but in html 5 you can still just use divs just like xhtml instead of all the section and aside stuff.

 

You have your #wrapper set to 960px so lets do this:

 

#content {
background: url(img/green.png);
       width: 810px;
height: 100%;
//You can do a height but not necessary the content will set the height.
       padding: 35px;  
}

Your side bar:

#right{
width: 150px;
float: right;
}

You might try to use set margin left 810px on sidebar to see if that works then you will not have to float it salving your float problem.

 

I am not sure if you will have to take the wrapper border into account.

 

When you are setting margin auto I find it works better like this:

 

margin: 0px auto 0px auto;

 

On your green background img, url(img/green.png), why not just set the color with you css instead of an img.

 

This is just my personal opinion but I always set a top margin, 20p to 30px, instead of the bottom margin.

Edited by grabenair
Link to comment
Share on other sites

Thank you so much for your help = got my background showing as I want it to, but I do disagree with you on a few point. I'm not going through them to complain, but so we can learn from each other:

 

I see you added the clear fix. It is in the wrong place. Sorry I should have been more clear. It needs to be right before the opening footer tag.

 

It is in the right position - I also tried to move it outside my content section, and then it no longer worked.

 

What I cannot figure out here is this: I have ALWAYS added the clear all to whatever division that follows my float - in this case the footer, and that has ALWAYS worked. I never saw the need to add some empty div for no other reason than to clear floats if the next legit division could do the same. Why it is not working this time, I have no idea.

 

I said you could fix the img position problem by wrapping them in a div. Sorry another my bad, you can do the same by giving the img a id and then setting the right margin until you get the img away from the border. I do apologize I was on phone with my ex-turn early while reading and typing, not at all far to you.

 

<img src="img/facebook.gif" alt="Join us on Facebook" id="faceBookimg"> or something like that

 

I haven't gotten there yet, but that would have been my approach vs. adding more tags with individual division. However, if I cannot find a way to direct all the images in my aside, then I think I will rather make them all the same size so I can center them all at once.

 

I think your html is also wrong, it should be:

 

<section id="content">
       Your stuff in your section left here
     </section> 
     <aside id="right">
     Your side bar stuff
     </aside>
		<div class="clear"></div>
    		<footer>
    		</footer>

 

My HTML is correct - I have one section content that contains both my 'left' and my 'aside' - and I need that because of the background issue. I could add my transparent background to the wrapper and then I would not need the content section, but then my header background would also be transparent,and there I want the main background image to show. I know there are ways to get the left and the aside section come out the same height, but all seem so much more complicated when just adding a container does the trick.

 

You will have to adjust your top margin on your footer now. Now your content and aside will work just like the old xhtml. Speaking of that, you probably know this but in html 5 you can still just use divs just like xhtml instead of all the section and aside stuff.

 

I don't see a problem with my top footer margin - what's wrong with it?

 

And yes I know divs work in HTML5, but since I'm using this project to learn a little about HTML 5, using the old stuff defeats my main purpose. Besides - I always used HTML, not XHTML.

 

You have your #wrapper set to 960px so lets do this:

 

#content {
background: url(img/green.png);
       width: 810px;
height: 100%;
//You can do a height but not necessary the content will set the height.
       padding: 35px;  
}

Your side bar:

#right{
width: 150px;
float: right;
}

You might try to use set margin left 810px on sidebar to see if that works then you will not have to float it salving your float problem.

 

I am not sure if you will have to take the wrapper border into account.

 

 

I'll have to address the margin issues later - no time now. I generally never add any code that's not necessary or doesn't serve any purpose like the 100% height - since, as you said, the content sets the height, it's redundant.

 

When you are setting margin auto I find it works better like this:

 

margin: 0px auto 0px auto;

 

On your green background img, url(img/green.png), why not just set the color with you css instead of an img.

 

This is just my personal opinion but I always set a top margin, 20p to 30px, instead of the bottom margin.

 

Why does setting the margin your way work better? I am using an abbreviated for, and when you set anything zero, you never need a unit of measure:

 

This

margin: 0 auto;

 

does the EXACT same thing yours does, only leaner.

 

My green.png isn't just the color - it's the transparent color. I chose that vs. using the HTML 5 transparency settings, because they make background AND anything on it transparent - what moron decided that would be useful????? And using a transparent image instead was just so much easier than working around this all layer transparency issue.

 

And setting top and bottom margins I base on the design - in this case, I have no need for a top margin, and I set the bottom margin as big as it is on purpose so my reef shows.

 

Anyway - I do appreciate your help, I now have my background where I want it. As to the rest, if I'm wrong, I want to know, if you're wrong, I think you would want to know - and sometimes, there are just 2 different ways of doing the same thing and neither is righter or wronger than the other.

Link to comment
Share on other sites

I have had the same problem with the clear float. I think it is a html 5 issue although I am just guessing. I also have never had the problem until I started working with html 5.

 

The html layout is the way I was taught to do it. What I was taught was to make the wrapper followed by the header then nav then content then aside.

 

I just mentioned the height 100% thing because it was in the css when I viewed source.

 

I mentioned the margin thing because you had

margin: auto;

in your css and I thought it might be causing some of your alignment issues. Yes I should not have put px behind the 0 because it is not needed and what if I was redoing someone else's code and they put % some where after I set it to 0 then I would be causing myself problems.

 

Most importantly, yes I want to know if I am wrong. I come here mostly know to help people out. If I give bad or wrong advice I want to be corrected right away.

 

You are right through through years, about 5 for me, I have found that there are most often a couple of ways to get the result that you are looking for. I find this a lot when I am working on a site with my friend who has 14 years experience. Sometimes he uses what I come up saying that does look better then other times not.

 

Thank you for your feed back, I do take congestive criticism very well. This is way I have pm'ed you a couple of times and asked you to look at my stuff to get your opinion.

Link to comment
Share on other sites

I would hate to see you have to ghange the img size from what you want so here is what I did on a site to get them to line up. The site is http://www.masoncitymotox.com

 

<div id="lfsidebar">
<h3>Sponsored By</h3>
<img class="aligncenter size-full wp-image-21" src="http://midwestwebdesignstudio.com/masoncitymotox.com/wp-content/uploads/2012/05/amsoil1.jpg" alt="" width="120" height="30" />
<img class="aligncenter size-full wp-image-23" src="http://midwestwebdesignstudio.com/masoncitymotox.com/wp-content/uploads/2012/05/clarionInn1.jpg" alt="" width="90" height="86" />
<img class="aligncenter size-full wp-image-25" src="http://midwestwebdesignstudio.com/masoncitymotox.com/wp-content/uploads/2012/05/community1.jpg" alt="" width="120" height="38" />
<img class="aligncenter size-full wp-image-27" src="http://midwestwebdesignstudio.com/masoncitymotox.com/wp-content/uploads/2012/05/harley.jpg" alt="" width="120" height="74" />
<img class="aligncenter size-full wp-image-30" src="http://midwestwebdesignstudio.com/masoncitymotox.com/wp-content/uploads/2012/05/riverCity.jpg" alt="" width="120" height="79" />
</div>

 

.aligncenter {
display: block; 
margin-left: auto; 
margin-right: auto;
}

 

I know there is only one with a different width but it is all I had.

Link to comment
Share on other sites

I've tried that - but it didn't work.

 

Could be that I have something elsewhere in my CSS that's causing an issue. I started checking into it last night, but didn't get very far.

 

Thanks for you continued help, so.

Link to comment
Share on other sites

I've been trying to shadow your work, but with little success. I'm only doing this because I want to find an answer and perhaps rekindle my knowledge. Boy, is that going to take some time. :lol:

 

Anyways, I came across an article by Chris Coyier regarding absolute positioned elements within relative positioned ones'. I can't says it grabs me by the throat, as I wouldn't have thought it was all that much of a big deal. Anyways, about that article...

 

Absolute Positioning Inside Relative Positioning

Link to comment
Share on other sites

Not for sure what your wanting, but this may help get you there.

 

#left - I don't see where you have this division floated left. So, add that property.

 

aside - comment out or remove all styling and add a margin property.... margin: 0 0 0 730px; Adding the large left-margin will allow the aside div to move up the page and align with the float. If this isn't what your looking for, please disregard. If so, now you can adjust your images as needed.

 

Best of luck, Mark

 

PS. remove the clear div, it's not needed. You cleared the left float in the footer.

Link to comment
Share on other sites

Whatever anyone sees on my site since yesterday does not count - I started messing with things and got interrupted. I'm not even sure where I left off - I'll let you know when I think I have something solid again.

 

But thanks for checking, and all hints will be considered and tried out as I'm trying to clean this up and get it to do what I want it to do.

Link to comment
Share on other sites

 

 

PS. remove the clear div, it's not needed. You cleared the left float in the footer.

 

Aside form the thing with things being in limbo right now - before I started rearranging things yesterday, I tried to clear the footer - that's what I always clear to clear a float, but for whatever reason, it did not work. Thinks only cleared with the clear div INSIDE the container div, but not outside.

 

No idea why.

Link to comment
Share on other sites

<!DOCTYPE html>

 

<html>

<head>

<title>Page Title</title>

<style>

<!--

#content {

width: 760px;

}

#right {

width: 200px;

margin-left:760px;

}

.center {

margin: auto;

}

-->

</style>

</head>

 

<body>

<section id="content">

 

<p></p>

<h2>PADI Courses</h2>

<p>.</p>

 

<h2></h2>

<p></p>

 

 

 

</section>

<aside id="right">

<a href="http:</a>

<a href="http><img class="center" src="img/padi.jpg" alt="earning" ></a>

<a href="h/"><img class="center" src="img/rmp.png" alt="Re Park" ></a>

</aside>

</body>

</html>

 

Although I just used colored blocks in place of your imgs.

Edited by Andrea
Link to comment
Share on other sites

Until I get back to my computer at home and can keep working on my version - here are a couple comments to your code:

 

Aside is the actual name of the section/division, so we can just style 'aside' - no need for an ID. And instead of adding a class to every image in aside, I'd just style aside img {....

 

And not sure if I have/had an issue in my code, but I have tried the margin 0 auto to center the images and it has not worked. But I'll try again once I'm done working through the code.

 

Thanks again, everyone.

Link to comment
Share on other sites

Okayyy - I finally got back around to things and made some progress.

 

I figured out why the clear all thing wasn't doing what I expected:

 

Adding the clear to the footer worked - but just to clear the footer. But what I needed was to get the section that holds the two floats to clear the floats, and for that, I needed the empty clearing div.

However, I ended up just moving the footer inside the containing section - now clearing the footer takes care of both issues.

 

Centering the images - no idea what I had in my stuff that screwed things up, but now that I made several changes in the CSS and HTML, the images center on their own.

 

For now, I'm waiting for feedback from the client so hear how she likes my artwork.

 

I'm open to feedback from the forum as well - note that so far, only English and German index page and the English courses page exist - the rest will need to wait until design/layout are permanently established, Oh, and the rotating header images - placeholder. I want only really good and interesting ones for that prime real estate.

Link to comment
Share on other sites

Hey Andrea, you've done marvelously well. Everything looks to be working just as it should be, even though I know nothing of HTML 5, let alone that other thing called CSS3. :clap:

 

I got nowhere near shadowing your stuff. I'm still wondering whether to just abandon my attempt altogether. I laughingly got stuck trying to create an altogether different sort of flexible sliding corners technique, but every time I applied them to the main content area the bottom right sliding corner would just go out of sync, and so it just kind of sank -- the idea, that is. :rolleyes:

 

Anyways, from having lived with it for the few days I was playing around with the FancyTransitions thingys, I'd say it has done exactly what it needed to do. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...