This is my general wrap:
.wrapper{
width:80%;
height:100%;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Inside from this wrap, I have two wrappers more, navigation and entries.
.wrapped-nav{
width:30%;
height:100%;
background-color:#333;
float:left;
padding-top:80px;
text-align:center;
}
.wrapped-ent{
width:70%;
height:100%;
background-color:#666;
float:left;
}
But when my content in the nav section it's outside and the scroll show up in the navigator, my wrap not wraps up my content.
I add this picture from the problem:
Edit: https://jsfiddle.net/qjLthkg2/
Because you're using position:absolute; for the container.
absolute items are taken out of the normal page flow. They are like a ghost and won't expand based on the contents of it, so the inner content just flows down.
You need to rethink your styling.
Related
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
The content boxes on each of my pages uses the same CSS, however on one page there is a scroll bar in the content box, and the footer does not sit properly.
This is because I use overflow:auto, but when I remove overflow:auto, the content box disappears completely. (The content itself still remains)
I'm not sure what the problem is, since they all use the same CSS and the other pages work fine.
This is the CSS for my content box
#contentProducts {
background:rgba(255,255,255,0.6);
width:80%;
min-height:100%;
overflow:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-radius:20px;
box-shadow: 4px 4px 10px black;
}
the content on the page is just 4 boxes with pictures, the css for those is
#clothingProduct {
padding-top:40px;
position:relative;
background-position:center;
background-size:cover;
text-align:center;
float:right;
width:300px;
height:140px;
margin-right:12%;
margin-top:60px;
margin-bottom:30px;
}
and this is the CSS for my footer
#footer {
float:left;
bottom:0;
position:static;
background:rgba(255,255,255,0.6);
width:100%;
height:20px;
color:black;
margin:auto;
overflow: hidden;
}
Basically, it should look like this (and does on other pages)
but on the product page, it looks like this
I have a workaround fix that involves just setting the height of the box in pixels, but that still doesn't fix the footer sitting in the wrong place.
If you need any more info just let me know, any help would be greatly appreciated.
Normally when I have a problem along these lines it has to do with a typo/mistake in the HTML. Not closing a tag properly or something along those lines, but it is hard to tell without the relevant HTML.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
I have a div with some text and another div with some hidden buttons behind the text div and move to the left when needed (anitmation).
The problem is that the text inside div is moved to the right to let the buttons div not overlap with the text.
Check here:
http://clip2net.com/s/2JYBV
How to make text of main text div not interact depending of the the width/size/position of the button div?
.a {
position:relative;
width:400px;
height:300px;
margin:50px 200px;
background:#000;
padding:10px;
color:#fff;
}
.b {
position:absolute;
top:10px;
left:0px;
width:180px;
height:290px;
background:green;
display:none;
}
.a:hover .b {
display:block;
/* left:-150px; */
}
You can use relative and absolute positioning of divs to fulfill your required task.
http://jsfiddle.net/G9Q25/
try giving a z-index to your button div
z-index:2;
Try adding the following to your definition:
overflow:hidden;
I have a div container with height:auto, this I assume would increase the height depending on the contents. However I have another div right after this first div, with height:auto it will overlap the current div.
div.footer{
position:relative;
width:1010px;
height:50px;
margin-top:auto;
margin-left:auto;
margin-right:auto;
border:1px solid gray;
font-family:Helvetica;
}
This is my current css for the bottom div. How do I make it appear at the end of the first div, instead of overlapping?
The first div:
div.mainbody5{
position:relative;
margin-top:20px;
width:1010px;
height:auto;
margin-left:auto;
margin-right:auto;
border:1px solid gray;
font-family:Helvetica;
}
They're not overlapping on jsfiddle for me, but I can still help you out. Just add this right after the first div:
<br style="clear:both;" />
This should add the space you're looking for between them.
This also keeps them centered on the page. ;)