I'm getting a little confused with using Absolute and Relative positioning. Basically I have a sidebar which has roughly 4 divs in it.
I want div 3 to always be at the same place on every page, as occasionally div 1 or div 2 are missing, which in turn pulls div 3 up.
I tried adding position: relative to the sidebar, and position: absolute to div 3. This puts it in the correct place on the sidebar, but it makes div 3 overlap the other divs.
What am I missing out here?
Layout for anyone confused:
<div id='sidebar'>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'></div>
</div>
That's how absolute positioning is supposed to work - the absolutely positioned element is removed from the content flow, and takes up no space - so it can't push the elements down.
You're going to need to use some sort of placeholder, or come up with something using margins. I'm not sure about how your elements need to be placed, but, if div3 always has to be, say, 400px from the top, why don't you do it like this:
<div id='sidebar'>
<div style="height:400px">
<div id='div1'></div>
<div id='div2'></div>
</div>
<div id='div3'></div>
<div id='div4'></div>
</div>
This way, you can hide div1 and div2 at will, without the need to use absolute positioning at all.
I just tried hiding #div1,2,4 using visibility styling and it didn't move any of the other div's
Take a look here: http://jsfiddle.net/hq6LM/10/
The reason for this is cause if you style using visibility it still retains it's block properties and the div's wont be moved up because they're still there just invisible.
Hope this helps.
Related
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I'd be glad if you could help me with some positioning. Here is the website.
Problem is my footer. I can't make it show always below container (if text container goes below img). If text is short enough to not go below img its ok. I tried many solutions, but non of them seemed to work for me. Solution to this could be making slider div with background, but I can't use it because I want it to fit the screen (so I need to use <img> inside it.) Any help would be much appreciated. Long story short:
<div id="container">
<div class="slider"><img with background</div>
<div id="page absolute div">
content
</div>
</div>
<div id="footer"></div>
Another solution could be stretching "container" height when "page" div keeps getting bigger, but its not possible (from what I know) because its position is absolute.
[EDITED]
www[dot]fami[dot]nazwa.pl/cc/apro/wp-content/themes/apro/style.css
div id dol is footer
how website looks to me: http://i.stack.imgur.com/yjY2a.png
i want footer (div id dol) to be below that absolute div with content
I see nothing wrong with your page, so I don’t understand what you are trying to do. However, have you considered using floats and clearing with your footer?
using firefox to see the code and css, I can't find a 'footer'....?
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>