On my website http://nebkat.com/beta/index.php I added a sidebar. On the homepage there are two posts. The problem is that the second one always goes under the sidebar content. How do I move it up without using margins(example:margin-top: -50px)
Float your <div id="content"> to the left? That works in FF 3
There is a DIV with style="clear: both" in between your two posts. By playing around, I deleted that div and added style="clear: left" to the second post. So, perhaps try adding "clear: left;" to a CSS class that you use for your post header. The class you are assigning to this div is mainbar_header so you could just add a clear:left to that. The div inbetween is causing the spacing issue, not the sidebar.
Related
Hi all,
I needed to add z-index:2 to the header elements, now the topbar nav drop down is appearing under.
I tried to add {position:relative;z-index:999} on many elements, but it doesn't work. Any hints?
I am using CSS, margin is added to show the problem
Code here:
[HTML and CSS][2]
[2]: http://codepen.io/anon/pen/yYKamg
Change this: <div class="row show-for-medium-up" style="position:relative;z-index:2">
To this:
<div class="row show-for-medium-up" style="position:relative;z-index:3">
The z-index: of 2 on this div is placing it in front of the navigation dropdown. So I think you need to move the container element of the dropdown nav up a level.
<div class="row show-for-medium-up" style="position:relative;z-index:99">
This fixed it, Setting the parent container to a higher z-index. I am pretty sure I tried this more than once yesterday. Thanks guys. I will keep you posted if anything pops up.
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'....?
I have this test page [edited by poster after question was answered] and something in the HTML source is messing it up so that the right column is getting placed underneath the left column.
I keep looking at it in firebug but can't locate the spot where the HTML has a problem. Any idea what is causing that page to place the right-side column below the left side column?
Thanks!!
you need to place the right bar div outside the first div of the parent #layout div
<div id="layout">
<div style="float:left;"></div>
<div>YOUR RIGHT BAR DIV</div>
</div>
I can tell you the tag that is not being closed properly is
<div style="float:left; width: 700px;">...yourcontent...</div>
I can tell because the footer is being trapped in their.
I'm no genius, but there was a comment in the source that said:
<!-- Here you need a closing div tag and the right menu goes up. -->
You could try putting it there.
You just misplaced the box. You have to place the div that should float on right (the right menu with donate and stuff) right under
<div id="layout" class="yui-t6 content">
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>