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.
Related
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.
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.
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.
I have 3 divs and all of them are floated to the left. My container can accommodate only 2(intentional) so the 3rd div is pushed below. My problem is the height of 2nd div is more than the other two, and the third div is showing up where 2nd div ends, leaving an empty space between 1st and the 3rd div. I want the 3rd div to wrap around the 2nd div, so that it shows up right below 1st.
I have tried floating the second to the right, and seems like it works, but I wanted to know if there is solution floating all of them to the left.
Just to clarify I have added an image showing the problem below:
http://img684.imageshack.us/img684/3209/divs.png
For a simple fix, you can wrap the same element around div1 and div3, assign a width and float left, assign a width to div2 and float it left as well.. assuming source order doesn't matter.
Won't making div1 wider (the same width as div3) solve this?
If you know the exact heights of the divs, you could use a negative top-margin on div3 to bring it up.
#div3 {
top-margin: -100px;
}
(replace '100px' with the difference between div1's height and div2's height)
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.