I set background image in #section-content, background is repeat-x, and background color in #section-footer. Problem is that backgrounds are cut by the amount of space that is first seen.
Is there any way to fix this?
There is image with problem, you can see that footer background color is cut off when is resolution or window small and I scroll right...
Problem image
You need to define min-width to the footer. Consider your main page wrapper has width: 980px; then assign min-width: 980px; to the footer element. When you resize the browser window, your footer knows that he has to repeat the background to the specified min-width even when your page gets horizontal scroll.
my html structure looks like this
<div id="page">
<div id="section-header">
...
</div>
<div id="section-content">
...
</div>
<div id="section-footer">
...
</div>
</div>
so I add to css
#page {
margin: auto;
overflow: hidden;
min-width: 1180px; /* it fits on my site */
}
and problem is solved...
Related
As this link : https://jsbin.com/tudeseqomi/edit?html,css,output
the panel width and height shoule be 800px and 450px.
So I want to let the part:
<div class="panelFrame">
<div class="panel">
</div>
</div>
can scroll because it's too big over the blue zone ,
How can I do this ?
p.s. I don't know why the <div class="panelFrame"> part become whit on jsbin, on my local it's green
add overflow-x: scroll; on .rightpart class
.rightpart{
background-color:blue;
height:500px;
overflow-x: scroll;
}
See below
set overflow:hidden/scroll in css for the green div
You have given the color green to which is overwritten by the class .panel in one of the included CSS from the following link, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/panels.less.
Use the property overflow:scroll to have scroll on the element or reduce the width of the 'panelFrame' and use the above property.
Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
i need both has full-height has to come to bottom of the screen even there is very low contents.
now it looks like
here my fiddle
demo
moreover i tried full height for body and html to
body, html{
height:100%;
}
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used normalized.css to reset the styles and avoid the default margins otherwise applied to the display: table; div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Use :
display: table-cell
Here's the result:
http://jsfiddle.net/GhxQL/6/
You've got the right CSS in your fiddle; you just have some errors in the code.
Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.
Updated fiddle: http://jsfiddle.net/hqkVh/7/
Ok Let's make the equation HARDER !!
so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?
if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely
You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution
PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT
I suggest Use Min-Height 100% and Height Auto
I'm trying to create the following layout in CSS:
It is a typical web layout where all the content is in a wrapper DIV that has a defined width and is centered on the page.
However, the purple background is a CSS gradient and needs to fill the entire width of the browser (and not just the width of the content wrapper). Furthermore, different pages will have different lines of headline/intro text (e.g. some pages might have 3 lines, others just 1) and so the purple background needs to match the height of this content.
I am also using a CMS which places all the content in a wrapper that has a width and is centered with margin:auto.
How can I achieve the layout?
At first I though I could use position:absolute on the headline/intro div. This works great. Except the rest of the content gets hidden behind the headline/intro div.
See an example here: http://jsfiddle.net/5BkX6/1/
I then tried using position:relative on the headline/intro div and then using negative left values together with padding to stretch the background of the DIV while keeping the content centered.
See an example here: http://jsfiddle.net/4DZYr/1/
This method works great, except it creates a horizontal scroll bar. I know I can apply overflow-x:hidden to the main wrapper DIV to hide the scroll bar, but I would prefer not to have it in the first place.
How can I achieve my goal. I do not want to use jquery to get the height of the headline/intro DIV.
This should give you the layout you want ^^
Here is the Html
<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
And here is the style
.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).