I have two divs, one above the other, i would like the bottom div to ignore the one above it. The bottom div has the top margin property. By ignore i mean i dont want the top div to be counted when it is using top margin (but rather to push against the wrapper which contains both divs.)
Just use absolute positioning for the top div.
If I understand correctly you could change the top div to position:absolute; which will take if out of the flow of the document.
Related
I'm trying to create a two columns layout where there is one column floated left, and there are two DIVs floated right. The sum of the two right DIVs is a height that is less than the height of the left DIV. I think I'm missing some CSS that allows this to happen. As of right now the second right DIV is appearing below the end of the left DIVs because of the height difference.
It's probably easier to view the page itself to see the issue. I need to have the DIV close the end of the right content so that it appears that all of the text is within a box.
http://brimbar.com/no_crawl/RiverHollow/history.html
I can add a negative margin to accomplish this, but I'm assuming I'm going about this all wrong.
Un-float both (or all, if you plan to add more) of your righthand divs, put them inside a wrapper, and then give that wrapper a margin-left value equivalent to the width of your left div.
screenshot: http://easycaptures.com/fs/uploaded/677/0314515048.png
demo: http://jsbin.com/aviyok/1/edit
You should also remove the huge negative margin on your right content div; that breaks very easily.
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
I have a navigation bar set to "fixed" positioning at the top of my web page with a transparency of 75%. I have another div that holds all of my text/content that also has a transparency of 75%. However, when the "content" div overlaps with the navigation bar, I want the overlapped area of the "content" div to not be there, so to speak. I also want there to be a tiny gap between where the "content" div and the navigation bar would overlap.
When it's scrolled up:
When it's overlapping:
In the 2nd screenshot, I want the part of the "content" div that is overlapping to go away.
to overlap.
1st div
position:absolute;
z-index:2;
2nd div to over lap the 1st div
position:absolute;
z-index:3;
z-index will make elements overlap but it must have the position
you can use fixed or relative also.
I think you could put the "content" div in a transparent "container" div that was fixed just below the navigation and 100% wide/tall. Then put overflow:auto on the "container" and overflow:hidden on the body.
The "container" div will effectively become the body of your page and all scrolling will happen within it, instead of the body. So it should then look like the "content" div disappears before it reaches the navigation while you're scrolling down.
This may or may not be practical depending on the rest of your page, but i think it might work, give or take a few other css tweaks u may need.
How to do the following layout without using tables:
left element(100px)|right element (occupies what ever space is remaining, even when there is no content)
Thanks
Edit: link to code: http://pastebin.com/vU33jNxD
Float the left element and give the right element a left margin of 100px.
Remove the 100% width for the #right div. This will make it so there isn't an extra 100px to the right of the screen.
I have 1 span within a container div. I want the span floated to the right. The content within the div and the span should be on one line.
In Firefox, that's how it displays.
But in IE, the span is displayed on a new line:
http://i48.tinypic.com/etzg5f.png
Why do the browsers display the content differently?
You should float the other content to the left. So have two floats; left and right.
Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!
You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.