if you click and hold the left hand corner of the stackoverflow webpage and drag it to make a smaller browser the screen does nothing with it's elements it just becomes a smaller screen as parts drop off. This is what I want to achieve. Probably easy, however I can't get it to do it on my small web app. If I do this the centre Div and it's containing text start overlapping other elements etc. I thought position: fixed; might help but that drags the centre div across the screen.
Just set a specific with to <body>, for example:
body {
width: 900px;
}
Demo
You can also try min-width instead of width.
If you add a <div> to everything in the <body> with a width it will become fixed instead of liquid.
like this:
<div style="width: 1366">
<body>
blah blah
</body>
</div>
Related
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
i have a small html page in the following format
<html>
<head></head>
<body>
<div id="wrapper">
<table></table>
</div>
</body>
</html>
the problem I am having is that its not showing everything.. it scrolls down up to a point.. the background of it is a photoshop .png image and on top of that background i created the table within the div..
Everything else is in place and show appropiately, its just the end of the page is not showing.. doesnt scroll down completely.
The background at the end has a "Designed by [name]" but it is not showing this part.. it scrolls down up to just before this part of the png picture..
Any ideas what I could be missing?
Based on the limited information you provided, my guess is that the height of your page's content is not long enough to justify showing that part of the background. The page only scrolls to the length of the content, not the length of the background.
Fix the height of your wrapper div by making its min-height equal to the height of your image. Assuming your image is 500px in height, you CSS would be the following:
<style type="text/css">
#wrapper {
min-height: 500px;
}
</style>
I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>
I have an element( 2 anchors next to each other) inside the div(spans about 1150px so you need to scroll down to see all the contents of this div). This anchors are position:fixed at the top of this div so as you scroll down the div anchor will be visible all the time.
My problem is when you shrink the width of the browser window, I want second anchor to go below the first one as the space runs out, however until the browser window physically reaches the anchors, no wrap around is happening, so div is getting smaller and two anchors are overlapping each other.
When I remove the position fixed, as I resizes the browser window and div's width shrinks one anchor wraps below the other one as expected. So I am guessing I just need y-axis fixed but not x-axis.
The position attribute applies to the element as a whole. What you're really asking is for a new kind of position attribute.
You could apply the fixed positioning to an element that contains your two anchors, and if your anchors are set to float, they will wrap if they need to:
<style type="text/css">
#fixed {
position: fixed;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
...
<div id="fixed">
<div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
<p>something here...</p>
</div>
A similar question about fixed-y / scrollable-x was the subject of an earlier discussion whose conclusion was you need JavaScript to do it, as others have said.
The general approach in that answer was to look every tenth of a second or so to see if the elements should be moved, and then to move them if so.
Looks like this may be a possible duplicate of this question.
In a nutshell, you can't do this with purely CSS. You'll need JavaScript. I recommend jQuery.