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.
Related
I tried to make two sections to my structure, one is a top section and another is a body section.
I'm trying to make the mainbody divs break away from the top section. For some reason when I add the color purple to a main body div it's coloring in everything else!
I added overflow:hidden to the wrapper and it did something, am I on the right path?
You can see my example here.
Thats because you used floating elements and didn't clear after them. Add
.mainbody{clear:both;}
But why do you have .topsection{float:left;}? If mainbody has width: 100%, it does nothing.
And overflow:hidden did somethink because if you have a block element with some floating elements before him, and you set overflow different than visible to him, you are creating columns. So then mainbody wasn't under topsection.
Edit:
Even if you remove the nonsense .topsection{float:left;}, it won't work because topright and topleft are not cleared floating elements too. So you have to add .mainbody{clear:both;} too, or change your topsection into:
<div class="topsection">
<div class="topright">...</div>
<div class="topleft">...</div>
<div class="clear"></div>
</div>
And then
.clear{clear:both;}
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.
I'm having problems with the following (example) code. What I'm trying to achieve is the following: div#id1 is a container div. This contains a div with an optional image and a div for body text. Div#id2 is similar. Div#id3 is a container div for the menu. It should be located to the topleft of #container. Now in case there is an image in #id1 the div#id3 will be pushed down. This works in FF, Chrome, etc. It works in IE too but only with div#id1, as soon as I add div#id2 it seems IE uses it to clear the div#id1.
<div id="container" style="background:red;width:800px;min-height:500px;margin:0 auto;">
<div id="id1">
<div style="width:200px;float:left;"><!-- this div has optional content and therefore might or might not push the purple div down --></div>
<div style="background:yellow;width:600px;float:right;">This is the top right div</div>
</div>
<div id="id2">
<div style="background:green;width:600px;float:right;">This is the bottom right div</div>
</div>
<div id="id3">
<div style="background:purple;width:200px;">This should be the top left div but is not the case in IE</div>
</div>
Try the code above in both FF and IE and you'll see the difference. IE messes up. Then remove div#id2 and it's contents and try again. Here IE shows things just fine.
Any clues as to how to fix this?
Cheers,
Bartezz
The blank div seems to have a minimum height meant for containing text, which causes it to be pushed down -- in Fx empty divs are not shown at all, and don't save any space for content inside them, cause there isn't any. Try modifying the 2nd inside of #id1 and the div #id2's width to lower and you'll see that the purple div gets pushed up a line-height -- I'm guessing the widths cause them to get so close to each other, that IE (but not other browsers) doesn't know how to make room for it so it pushes it down.
Dunno if this fits with your ideas, but why don't you just have one left div, and one right div, and fit divs inside them?
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>
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>