I'm trying to understand the case with responsive divs but I've got one problem.
As long as whole stuff is about 100% div's width it's not a big deal. But I find it difficult to add some additional features.
Here's my tiny fiddle:
[https://jsfiddle.net/yqh31d7v/][1]
The effect I'd like to gain is to fix sidebar's width (unless I define it to not) and shrink only blue div maintaing fixed margin-left at 20px.
I was trying to set width with % but it is not holding correct margin-left all the time.
So no matter what the browser width is I want to keep 300px sidebar width 20px margin left and keep blue div responsive from 0 to 700px.
P.S. I've checked some previous topics including ie. this fiddle
[http://jsfiddle.net/FXk4x/10/][2]
But adding left:20px; or margin-left:20px doesn't work.
Thanks in advance.
You currently have this css at the bottom:
#media screen and (max-width: 850px) {
#sidebar {
float:left;
margin-left:0px;
width:300px;
}
}
This is telling the browser that if the window is 850px or less then apply these rules (margin-left:0px;). So your css is working, but your viewing in the wrong screen widths to see the margin-left:20px; occur. Check these two examples:
Your exact code but in full screen (you will see the 20px margin if your screen width is higher than 850px):
https://jsfiddle.net/yqh31d7v/embedded/result/
Using a max width of 50px for the media query:
https://jsfiddle.net/yqh31d7v/1/
Ok, I have figured it out.
If you want to mix fixed and responsive floating divs you need to change position of fixed one to absolute.
I'ce updated the previous fiddle, it's more or less like this:
[https://jsfiddle.net/yqh31d7v/][1]
Related
So basically upon resizing browser to smallest possible im still getting horizontal scroll bar for some reason. I cant have this for responsive purposes.
Any ideas?
http://www.techagesite.com/page-1work11122.htm
Another thing while im here
You will notice a email form and another div beside it with a border on it. When the browser shrinks the 2 divs collide and overlap.
Im still learning css and have tried sever approaches but nothing sticks.
Help would be greatly appreciated
The horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css
#box6{
overflow:hidden;
}
EDIT: To get the desired effect as mentioned in the comment try the below css in media query for smaller screen.
The MailChimp form has width of 200px specified for its forms. This causes the right column to overlap the left section on re-sizing the window. So by setting width to the div container within the box6 and floating to left both the left and right divs will push the right section below when the screen doesn't have space to occupy both the divs side by side.
Also <ins class="adsbygoogle"> has a width of 200px given inline, so you can remove the width:45% specified for .right-column from your style sheet because this div will take the 200px width of its content.
#media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}
#box6 .right-column{
float:left;
}
}
I am trying to figure out the best way to center my content and sidebar on the page. Nothing I've tried is working (I'm very new to CSS & HTML).
I tried setting the widths to percentages, and set the margin at auto, but something's just not working. I don't want it to have a fixed width because it will look different on different screens. Not sure what the best way to go about this is, any help would be appreciated!
I also tried overflow: auto but that takes away the border-radius on my home page...
http://flashandshine.com/port/?page_id=73
You can tray this CSS in your container:
.container {
width:80%;
display:table;
margin: 0 auto;
}
If the content you're trying to center is a fluid width, you can do some simple math to center it. For example, if your content is 90% wide, there is a remainder of 10% in the parent container, meaning a left and right margin of 5% would center it.
It looks like from your example the problem is that your <ul> has padding and margin, and isn't set to a specific width.
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?