If you look at the following Website
the container class has a minimum width of 970px to prevent the website squashing down below that resolution. If you resize your browser to below this resolution and then scroll to the right you will see that the footer div that has the id footer doesn't stretch to fit the width of contents and so the grey background stops. Anyone know why this is?
the footer sits as a sibling of the .container div. In addition, you can see the the footer also contains a .container div inside it so its content will still align with the rest of the page's content.
On lower res you need to have a different class for the divs inside the footer
<div class="col-xs-3">
<!-- logo -->
<a href="http://beta.vacationnegotiation.com/" id="logo">
<img src="http://beta.vacationnegotiation.com//assets/img/layout/logo_ftr.png" alt="Vacation Negotiation" class="img-responsive">
</a>
<!-- /logo -->
</div>
should be
<div class="col-xs-4 col-sm-3">
<!-- logo -->
<a href="http://beta.vacationnegotiation.com/" id="logo">
<img src="http://beta.vacationnegotiation.com//assets/img/layout/logo_ftr.png" alt="Vacation Negotiation" class="img-responsive">
</a>
<!-- /logo -->
</div>
Setting a min width of 970px on footer sorted the problem
The container element within the footer element is adhering to the minimum-width css, but the footer element itself does not have the min-width. This means that your background colour won't stretch. The content, however, has a minimum width of 970px, as demonstrated by this screengrab:
Re-organise your markup, or give the footer a min-width also:
.container,
.footer {
min-width: 970px;
}
Related
i want to make a centered resized image+ navigation bar in a webpage with header and footer, header fixed top, footer fixed buttom, and image and the navbar, together should be resizable, respecting the aspect ration of the image (image could shrink, but never bypass original size.
the image is done, behaving as wanted!
the problem i had, i couldn't make the navigation bar stick in the bottom of the image as it's resized!
here is my code: https://codepen.io/chlegou/pen/vvYzya
<div class="popup">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg" />
<span class="content">
<span class="navbar">Navigation Bar</span>
</span>
</div>
i want the popup content stick together, with the image dynamic width. image still could shrink as it is! fix only the navbar to follow the image and stick to it.
thanks!
UPDATED the styling as you needed please check the codepen:https://codepen.io/anon/pen/ZVOoqq
<div class="outer-container">
<div class="inner-container">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg"/>
<div class="centered-content">
<span style="overflow: hidden">Navigation Bar</span>
</div>
</div>
</div>
and the for the styling of the divs please refer the codepen given above
I am facing problem. My page doesn't look like what i am expecting.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
On window minimize my header color is getting shrinks and not covering whole width of the content. How to fix it ? I tried to use max-width:980px; but that is collapsing the content when minimizing the browser. I want bottom scroll to cover the whole width without collapsing the content and background color to get fixed.
I see what you're doing wrong. Basically, your header only extends to a width of 100%, that is 100% of the viewport. When you shrink your screen past 980px, as denoted by your .width element some of your content goes out of the viewport thereby extending outside of the header. You can do many things to fix this, a really quick fix would be to add a float to the header and set its minimum width to 100%. e.g.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{min-width:100%;float:left;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
This is because you are giving fixed width to the elements .
Use the following Css and your problem will be solved:
*{margin:0; padding:0;}
.width{width:100%;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50%;}
.rightpanel{float:right;height:50%;}
.clear{clear:both;}
h2{font-size:32px;}
Also try reading why not to give fixed width and height, this would help you understand better
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
i have 4 divs inside of a div like this:
<div id="Wrapper">
<div id="CoreSideBar"><!-- a sidebar to the right -->
</div>
<div id="SystemContent">
<div id="SystemNavigation"><!-- will be some kind of "tabnavigation" in the top of this div -->
</div>
<div id="PageContent">
</div>
<div id="SystemSideBar"> <!-- a sidebar to the left -->
</div>
</div>
</div>
I would like the sidebars to have 200px width each and im also going to make it possible to "collapse" the sidebars so you can have more space for the PageContent div if you need it.
What do i need to do to make the PageContent div fill out the remaining whitespace between the CoreSideBar and the SystemSidebar? Is this even possible in all browsers?
Just put your sidebars' markup first, and float: left; or float: right; as desired — the div's default behavior will take care of the rest.
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm
http://phrogz.net/css/understandingfloats.html#incontainers