I have two divs: one is floated left and the other right. The div on the right is a constant size, but I want the div on the left to change it's width according to the window size. I currently have the width set to 75%, which looks great at a certain size. However, when the window get's relatively large, the space in between the two divs becomes too large. How can I set the width of the div on the left so that it's distance from the div on the right is constant, regardless of window size?
Set the left-most div's width to 100% and give it a margin-right the same width as the right div. Then make the right div's position absolute and fix it to the top-right corner of the page.
You can set the left floating div to 100% and give it a margin as wide as the right floating div. That should work
Like this jsfiddle
Related
I have an example of absolute positioned div which is centered in the page:
HTML
<div id="test1"><img src="http://www.interactivepixel.net/images/i01.jpg" width="500" height="333"/></div>
CSS
#test1{
position:absolute;
top:50%;
left:50%;
width:500px;
height:333px;
margin-top:-166px;
margin-left:-250px;
}
http://jsfiddle.net/ktFuN/
This works well until I shrink browser window so much that I get scrollbars and then even with the use of scrollbar I am loosing left and top side of the image, I cannot scroll all the way left and top of the image, like the centering doesn't work any more.
Why is that?
when you reduce your window size, only the body size gets reduced, not that of the image or the explicitly sized div#test1. lets say the body size becomes 450x300 (width x height), ie less than the div size 500 x 333.
Apply the CSS top and left rules to the div
left of your div calculates to (50% of 450) = 225
top of your div calculates to (50% of 300) = 150
So your div now starts from point (225, 150) ie (left, top)
Now apply CSS negative margins to your div
ie -250 to left and -166 to top
ie you div's position now becomes (225-250, 150-166) ie (-25, -16) absolute position.
Which means whenever you reduce you window size to be lesser than your absolutely positioned div size, some parts of your div would not be viewable, since body starts at (0, 0)
And since you've given that div negative margin for top and left, read this to understand how the div went out of view: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You could check this thread for some generic css based solutions for centering an element.
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
i want a div occupying the whole width of the window as well as having some padding or margin or border.
I know i can have it by giving the div a width of say 90% and having padding or margin or border of 5%. This works great but when i to reduce the window size the border or margin or padding starts shrinking. I don't want this.
So my question to the experts that how can i use a fixed padding or margin or border?
In case of narrower windows i'll rather prefer media query to detect the width and then giving another fixed padding or margin or border for a certain width.
Thanks in advance
Rather than percentage width, use width:auto then the div will expand to the width of its container, taking padding and margins into account to make it just wide enough to fit with them.
Then, if your body and html elements have width: 100%, your div with margins and padding should always just fit inside the viewport.
I am trying to do is to layout three <div>s: a top (for navigation), center, and footer <div>.
The top and bottom <div>s have fixed height.
How can I make the center <div> stretch 100% and subtract the height of the others (top and bottom)?
Note: I have given the body, html height 100%.
if it's divs you're using, I think that Javascript is the only answer to this one.
I have two div's in a container div, one floating left, one floating right.
I have a php function for a search engine that spits out results, into the left div. what I need to do is have
the right div repeat the background based on the height of the varied results on the left div. I have no idea how to go about this, any ideas?
Right now it looks like this:
left div content right div background
left div content right div background
left div content right div background
left div content
left div content
what I need it to do is base it's repeat-y off of the content in the left div so it looks like this
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
EDIT:
The only solution I can think of right now is to spit out a blank line in the right div for every link in the left div, i'd like to avoid that, which is why i'm asking for a different solution.
EDIT 2:
Thought of another way via javascript, to just detect the height after the div is loaded into the page, and reassign the height of the left to the right. something i'd like to avoid but hey what can ya do.
As a pure css solution you can use faux columns. Basically it implies using background repeat on the parent to mask the div height. It's an ugly hack, but works surprisingly well for most scenarios.
Or you can use javascript:
var box1 = document.getElementById('left-div');
var box2 = document.getElementById('right-div');
var height = box1.offsetHeight;
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight;
box1.style.height = box2.style.height = String(height) + 'px';
set the right div height as same as left div.