Hi I have a simple sidebar inside a div which has height:100% and I need the sidebar to float as high as the container becomes. Since I have a content div, and the content div will change on each page, it's inside this parent div which ideally should change in height and thus the sidebar would run the entire height of this parent div.
http://mibsoftware.us/clients/weber/?page_id=2
However in the above link I'm unable to get that to work. What am I doing wrong here? Any help would be greatly appreciated!
See:
Equal Height Columns with Cross-Browser CSS
Get it to float BELOW the bottom of that div (possibly in a simillar div), and then set it's position to relative and top: -height_of_div px.
Related
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I'm trying to make a div inside another div to be placed 70% from the top of the parent div so no matter what the screen size is the inner div should flow up or down to adjust for it (kind of like fluid layouts but vertically). I tried doing the following:
http://jsfiddle.net/uxaVe/
But the padding-top is fixed even though I have it set in percentage, I must be doing something wrong but I'm not sure what it is, could you guys help me out? Thanks in advance!
Remove the padding, and replace with
position:absolute;
top:70%;
I have placed an AP Div on my page that holds an iframe. I used position: relative so that the AP Div would not move with the image behind it. Once I added the AP Div with the css property Position: Relative it stays exactly where I want it , however it pushed the image further down. i need the main image to be aligned to top. If you look at the other pages you will see how they are all aligned at top. Is there a solution for this? I am not a css expert so I would be very appreciative of any help given. thanks!
my link is:
http://www.mylittleovertures.com/continue.html
thanks!
The basic problem is that div and iframe are block elements on the same level. Setting the iframe positioning to relative doesn't help. Instead, you should wrap image and iframe into a container DIV, set this DIV to position:relative and then absolutely position the iframe on that DIV. You could even drop the extra img tag and set the image as the background of the container DIV. You could also get of the <center> by setting the container DIV's margin to 0 auto
Here's an example: http://jsfiddle.net/99wCg/3/
Doing some css, so threw this quick fiddle together to show the issue I am having.
http://jsfiddle.net/ozzy/LJKsA/
The div block in center of the demo, is overlapping the container div.
Can you suggest a fix for this please, it always trips me up.
The center div can be larger as content is added, so outer div container needs to handle this also, and retain margins
You can add clear: both to the last element inside the containing div.
This is asked 10 times a day on StackOverflow. It's because you're using float ont he children of the container div. Just impleemnt overflow:hidden to it and it should work.
Search more about clearfix, also.
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.