I understand how everything is supposed to work but I have no idea why it is not working. I am trying to have my page to have two main fixed divs. The left one stays the same at all times and the right one overflow downward when there is more content.
This as of right now works perfectly. The problem is the body or my #bodywrapper divs or anything I make to have a min-width to store the #header and #bodyholder so that when the page shrinks to lower than 1280px horizontally it will require the whole page to overflow/produce a scrollbar so that you can see both the #header and #bodyholder divs. I have attached examples of what I am talking about.
since I do not have 10 rep points yet so here are the links to the images:
correct:
s1190.photobucket.com/user/obancooper/media/ex-correct_zpssnk69nck.png.html
wrong:
s1190.photobucket.com/user/obancooper/media/ex-wrong_zpsszf6kkoj.png.html
To help, the following is the best I can describe in HTML/CSS what the problem is:
html:
<div id="bodywrapper">
<div id="header">
</div>
<div id="bodyholder">
</div>
</div>
CSS:
#header { top:18px;
left:0px;
padding-right:0px;
height: 100%;
width: 18%;
position:fixed;
margin:0px;}
#bodyholder {width:82%;
min-width:1050px;
right:0px;
overflow:auto;
height:100%;
position:fixed;
}
#bodywrapper {
width:100%;
min-width:1280px;
overflow:scroll;}
My site is pumpingfe.com.
Related
I've converted two SVG images to css/data images, first time working this way.
I want the images to be responsive, in the centre and with a max-width of 800px.
I have made the height 100% and width 100% but when the browser is narrow, there is a huge gap underneath the images which makes the user have to scroll a long way to get to the next image, I want it right up against it.
I've messed about with this all day and can't figure it out.
I have attached a fiddle to see what I have so far and please see below the css code.
<div class="container">
<div class="front"></div>
<div class="front"></div>
</div>
and here's the css minus the front style as it would not post correctly.
* {
margin:0;
padding:0;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
background:pink;
}
.container {
width:100%;
height:100%;
margin:0 auto;
}
Here's the fiddle:
https://jsfiddle.net/gjkx1ye5/1/
Please see this pen in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** very long text here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
I believe the example is almost selfexplanatory.
The question is: How to do it, to have the .container div ready to host any kind of content, unknown at the moment, and not to overlap over the footer.
try to remove background colors. the text from .container is visually mixed with the text of the .static footer. How to arrange it and have the .content div and its text not to overlap the footer?
edit:
The footer should be at the bottom of the viewport.
No explicit sizes or dimensions are allowed to be set in css.
Please take my question as an example, an experiment.
My concern is not to use any explicit sizes or dimensions e.g. header height 50px, I want to have the layout as general as possible. so if I formulated my question in other words:
pls in my original codepen delete all the text from the .container and then check the .container height via developer tools. It will be 0, but I would expect it to be the same height as it's parent .flex-child is.
I know that it probably would not be following the specification, but how to achieve this?
edit 2:
I described my problem in more detail in another question, with codepen and picture. Thank you for your ideas. https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout
thank you
Your actual requirements are a little unclear as to the actual position of the footer.
Option 1.
The footer should be at the bottom of the viewport and so the whole page must be contained within the viewport.
In this case the content of the main element can be any size and a scrollbar is added when content will overflow the height of the element.
Codepen Demo
Option 2.
The footer should be at the bottom of the page/document and the page can be any height (presumably with a minimum of the viewport height).
In this case the content of the main element can be any size and the page/dicument will increase in size to accomodate it
Codepen Demo
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I am trying to accomplish this:
But I am having trouble getting the two middle divs to play nice. If I set them both to a relative number (30% and 70%) it "works" but the left div changes size as the user changes the browser-windows width.
#floatitleft{width:30%; float:left;}
#floatitright{width:70%; float:left;}
What I want is, as the picture illustrates
#floatitleft{width:300px; float:left;}
#floatitright{width:100%; float:left;}
But this causes "floatitright" to end up beneath floatitleft. And if I set it to 70% it does end up to the right of "floatitleft" but as I change the browser size a little it ends up underneath yet again. What to do?
UPDATE:
Eventually I ended up with:
#topper{
height:100px;
width:100%;
background-color:blue;
}
#wrapperz{
height:inherit;
width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
width:300px;
float:left;
}
#wrapperz #floatitright{
margin-left: 300px;
min-width:300px;
}
#bottommer{
height:100px;
width:100%;
background-color:red;
}
Which would be used as:
<div id="topper">
test
</div>
<div id="wrapperz">
<div id="floatitleft">
<p> Stuff </p>
</div>
<div id="floatitright">
<p> Stuff </p>
</div>
<div style="clear: both;"/>
</div> <!-- Close Wrapper -->
<div id="bottommer">
test
</div>
Note that this isn't proper HTML but it just serves as the solution to my example. Also, the "div style="clear: both" is escpecially important if you try this because not using that cuases the footer to mess up as the wrapper doesn't properly stretch vertically. But Mark has provided a what I believe to be better/cleaner alternative below.
Wouldn't this work as intended?
#floatitleft{
width:300px;
float:left;
}
#floatitright{
margin-left: 300px;
}
Here, I made a duplicate of your picture: jsbin.com/ipexep/3 (click "edit in jsbin" at the top-right to view and edit the source)
I for the height of the top and bottom sections, I took the height for them that you put in the picture.
Note: I did it by making every section absolutely positioned and setting their top, bottom, left, or right attributes accordingly.
Also, notice that my method will match every screen size. I have streched it in every area you didn't specify a dimension. (except the header and footer needed a height dimension so I guessed since you didn't specify)
You can accomplish that very easy using grid system.
http://960.gs/
Take a look, you can choose a 12 or 16 , 24 or even more columns. You just use classes like "grid_4", "grid_8" depending on the width you need.