I have gone through a long tutorial on W3Schooles to learn CSS; I learnt some basics but still miss my primary aim: Positioning DIVs
This is what I'm trying to do
*---------*---------*
* * *
* * *
*---------*---------*
My goal is simple and trivial for some, but I'm having headaches doing this the right way, in fact I did it but it has lot of problems when I add more text to the DIVs or they simply merge with another DIVs
What I did is simply play with margin and padding values using FireBug. All I need now is to learn me this simple (I hope) trick, what I'm missing is: how this simple positioning works? Shall I use absolute, relative positioning? Change the margin, the padding, the size??
If you have a good tutorial explaining this point, so please point it. I had other headaches looking for that on Google.
It looks like you are trying to float two columns next to each other. This is fairly simple and covered in depth here :
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
I tend to stay away from the position property unless I have to overlay some elements.
Creating a 2 column layout in CSS
Personally, I don't like using a clear:both on a br tag.
Use overflow: auto on the parent div instead
<div class="container" style="overflow: auto">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
</div>
I've had good luck emulating the code found in the 960 grid system.
The right way is hard because many things aren't really cross browser compatible. Browsers are getting better, but its still a nightmare if you have to use anything IE compatible. (lots of hacks)
With absolute positioning you can absolutely place any of your div's. the drawback being that they are stuck in those positions no matter the resolution or the size of the window displaying your page.
What you could do is float your left column to the left, and then not specify floating on the right column. Keep the default positioning by not specifying absolute nor relative, then just adjust the widths of the elements as needed.
If you are okay with setting specific widths on your divs, the following has worked well for me:
<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>
The "float: left" makes the columns line up side-by-side. The last div (with the clear: both) makes it so that anything you put after the columns stays below the columns. This way, you can change the width of either column without messing with the styling of the other.
<div class="container">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
<br style="clear:both" />
</div>
Related
Css noob here in need of some advice.
I have a form that sometimes has 2 divs side-by-side (with input/labels inside/validators). Any further divs after this don't format correctly, not even with a clearfix.
[div] [div]
--> clear div goes here
[ div ]
I've fixed it with another Div with css {clear:both;} but this is superfluous. Whats more I've found that IE needs a height on the clear div to honour any margin on the lower div.
Is there a better method of dealing with this?
It's tough to see exactly what issue you're having without seeing the code, but hopefully this helps.
<div class="one" style="float: left;"> This div is floated left </div>
<div class="example1" style="clear: left;">this is text in example 1</div> <!-- notice clear left means this dive will appear after the float, no matter how much stuff is in the float -->
if class one is floated left, then example 1 would appear right next to it, but in this case you cleared the float to the left (which is class one) so example 1 appears below your floated object.
Okay so this question is asked all over teh interwebs, including on this site multiple times. But I can't seem to apply the answers to others' problems to my own. So here's my specific case:
<div class="logo-align_container">
<div class="logo_image">
<img src="images/logo.png" />
</div>
<div class="logo_text">
<div class="site_name">
<h1>foo</h1>
</div>
<div class="site_slogan">
<h2>bar</h2>
</div>
</div>
<br class="clearBoth" />
</div>
How do I centre logo_image and logo_text vertically and horizontally within logo-align_container? Whenever I apply the fixes scattered across the web I manage to horizontally center the divs, but logo_text will always be aligned at the top of logo-align_container, and nothing I can do repositions it.
Moreover, the image and text make up a considerable part of the page. When the window is too small for them to be positioned inline (which they currently are, through float: left on both and .clearBoth { clear: both; }, I'd like to have them collapse so that logo_text falls below logo_image (which is already happening so far) but also so that both are still horizontally and vertically aligned. If this doesn't come as part of the fix to the first problem, it'd be really great if it could be accomplished separately.
If I had to give logo-align_container a fixed height, it would be 532px.
Thank you for your time!
EDIT: wheresrhys' solution almost hits the mark. Here's what it's not accomplishing which I would like it to do: http://i.imgur.com/BhHMv.png
This fiddle demonstrates a solution: http://jsfiddle.net/wheresrhys/t6pUq/ using display:inline-block
A few points
It won't work in ie7 and below as inline-block isn't supported on elements which have display:inline by default. A decent fallback in that scenario would be to use display block and then set margin: x auto 0 on logo_wrapper, where x is a value that puts the logo and title roughly in the vertical center.
I modified the html slightly - adding a wrapper around all the elements needing to be centered is necessary, and also the comments prevent the whitespace affecting the positioning of the inline-block element.
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.