I'm new to HTML and CSS and building my first site. I'm coming across this very strange alignment and positioning issue and has stumped me. I would appreciate anybody helping me understand what's going on.
I've loaded the html and css to codepen so you can view it: http://codepen.io/joe/pen/kJmeK
I also took a screenshot of the problem and uploaded it for your viewing:
What's happening is that as soon as I wrap the phone number and the address lines 1-3 in a p tag, they seem to get right-aligned and get stuck under the map. But as soon as I unwrap them they go back to their original location and behave normally.
However, loaded into codepen the p tags seem to be behaving as they should.
I've tried to address this by playing with negative margins and paddings in CSS for both the h2 tags and the p tags. But that creates the problem of not knowing where the <p>s are exactly located and aligning them with the contact_us form.
As you can see in my CSS, I have not played with the p tags anywhere else previously.
What am I missing here?
youre code is pretty messy from what i can tell. If youre gonna use tables, why bother with absolute positioning for this simple layout?
Most likely, maps, has float right, p, doesnt have any float property and is thus positioned behind the map, because a floated element is taken out of the normal flow of elements.
p {float:left;}
or
p {float:right;}
should do the trick, but still i would suggest reviewing youre whole code, and making either a table layout, or better yet a css layout not using any tables for layout.
Also note, a floated element should have a width propperty set as well, otherwise, it shrink wraps.
Related
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)
I'm learning HTML and I wanted to practice by recreating a invoice sent to me by Electronics Expo.
However, I used the background-image property and repeated it by repeat-x and now, the background stretches across the page so much that it has a horizontal bar to drag.
http://htmlpocketreference.110mb.com/index.html
You can see what I did in my link above.
Also, I would really appreciate some advice on simplifying my CSS coding. It seems really messy and I have to move every element once something changes. -.-
Thanks!
It's because you have relatively positioned elements that do not have a fixed width - these elements take on the width of their parents, which is the width of your invoice, and stick out of the page, causing the overflow. Give them a background color, and you can see this quite clearly:
Give the elements a fixed width to fix this, or alternatively, look to other methods of laying out your elements, like floating them.
In addition to this problem, you're also repeating the id attribute, which is creating invalid HTML. You should look at using the class attribute for multiple elements sharing the same style, or even better, look at using inheritance and the cascade to not have to give every single element an id.
Further reading:
CSS Positioning 101
Inheritance and Cascade from The Web Standards Curriculum
Problem is not the background. The problem is the position relative you're giving to the block level elements without defining their width...
The h2 elements like (Ship To:) and (Phone) and all the paragraph elements. You need to give these elements a specific width and it will work fine
Try giving these elements a background-color: yellow; to see how the flow inside the document ( for your debugging purpose ) and you will see what I mean