I am converting an html page to a responsive page with a #media query without any framework.
Whenever I resize my browser window to a lower width, the divs are overlapping with each other.
First, I was using position:absolute;
but now I have removed position:absolute; but the divs are still overlapping with each other.
.demoD
{
width:100%;
position:relative;
display:flex;
margin-top:50%;
}
#demoD1 {
width:50%;
padding:40px 10px 20px 40px;
}
#demoD2{
width:50%;
background-color:#F3F6F7;
padding:80px 10px 30px 40px;
}
divD2 is overlapping with divD1. Both divD1 and divD2 are placed in divD.
Please give me some solution.
Related
I have 3 divs with scrollbar. if we move one scrollbar and it reaches end of scrolling area page also scrolls.
I want to fix this issue.
Fiddle for it. http://jsfiddle.net/78h8e88x/2/
html, body {
height: 100%;
position:relative;
}
body
{
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
overflow:auto;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
if we move one scrollbar and it reaches end of scrolling area page also scrolls.
The body element gets a margin of 8px by default (in Chrome at least). In the case of your fiddle this makes the content slightly bigger then the window and thus a scrollbar appears. Setting the margin to 0 on the body will remove this scrollbar. See jsfiddle: https://jsfiddle.net/vbvmLbmq/
That of course only fixes the scrolling behaviour in your fiddle which was a matter of window size. You can prevent scrolling on the html,body elements entirely by adding the overflow: hidden; css rule to them but keep in mind that would also hide any elements that flow past the height of those elements.
Continuing the scrolling of the page after a child elements scrolling has reached its end is browser application behaviour, which you cannot influence with javascript on your page.
I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
I have two divs that I have have positioned on the left and right sides of the screen (using float and/or absolute positioning, I have found many ways to position them). In the middle I have a single div that keeps the content of my website centered. My problem is that when I have my browser at a small width those outside divs are forced in and mess everything up in the center. When I have my browser at a small width I want a scroll bar to appear so that a user and scroll left or right to see the divs outside the center content. I am using overflow:scroll on the body element but that doesn't do anything. I also need to use
Here is the basic structure
<body>
<div id="navLeft">
<div id="navRight">
<centered content/all of webpage>
</body>
Here is the CSS for the body and side divs
body {
background: #A2F0FA url('images/bg_site.jpg');
background-repeat: repeat-x;
font: 13px Arial, Sans-Serif;
color: #525252;
overflow:scroll;
}
#navLeft {
border: 5px solid #fff;
width:220px;
height: 260px;
float:left;
position:absolute;
top:10%;
left:28%;
opacity:0.85;
}
#navRight {
border: 5px solid #fff;
width:220px;
height: 260px;
float:right;
position:absolute;
top:10%;
left:85%;
opacity:0.85;
}
you can try some negative margin on body's side.
but you won'nt be able to show the left aside on small screen so if content is important, you loose it :
body {margin:0 -220px ; /* width of aside element */.
Test the idea here
Best is to check via javaScript on load and resize width of window & body & if an horizontal scroll is there and its scrollright value.
Then reset the scrollright to a proper value without annoying your visitor.
Sorry for this very basic question.
I have these two boxes containing width evenly-
.box1
{
width:50%;
height:200px;
}
.box2
{
width:50%;
height:200px;
}
Here is container div of these boxes-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
I want to know when container div has width of 100% and its containment divs are equally divided to 50% of width.
Then after aligning them inline why isn't it coming in-line?
However reducing width less than to 50% makes them align.
Although if i align them with float attribute its shown inline-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
.box1
{
float:right;
width:50%;
height:200px;
background:red;
}
.box2
{
float:right;
background:red;
width:50%;
height:200px;
}
I want to know the reason why it is not showing them inline whether width is equally divided?
They are inline-block, but usually when using 50% you don't count for pixel rounding and margins/padding. So, in reality, 50% would be 50% + 10px, which will cause the next div to not fit in the same line, breaking the line and dropping it below the first div instead of alongside it. If you inspect the element using Chrome's inspector or Firefox's Firebug, you will notice it doesn't take up the whole width, only just above half of it.
Your border counts as part of the element size, it's an addition and not an inclusion in the width 100%. That will cause an inline element to move onto the next line down.
The box model adds all of it's parts together to get the final size, including padding and margin:
http://www.w3.org/TR/CSS2/box.html
A normal gotcha is that when you specify border 1px you're actually adding two pixels to the final computed size, one to the left and one to the right.
Firstly I would set padding: 0; and margin: 0; incase of any browser allocated padding (user agent stylesheet - this can be seen using inspect element in chrome, or firebug for Mozilla etc), and if you are going to float them then float them left and clear the floats afterward. So you have something like this:
.container{
border: 1px solid green;
width:100%;
}
.box1{
margin: 0;
padding: 0;
float:left;
width:50%;
height:200px;
background:red;
}
.box2{
margin: 0;
padding: 0;
float:left;
background:red;
width:50%;
height:200px;
}
Should do the trick.
I'm using two css files [for my fluid width site here][1]: one where the left hand nav is 'display:none' when below a certain width.
I'm setting the right hand nav (with banners) to max-width:348px and a padding-left:20px.
The problem happens when I set the #main-content div to a percentage width: it doesn't resize correctly and causes it to drop down below the right nav when the window's reduced. It doesn't really make sense so not sure how the best way to go about it is.
Within the #main-content div, there is the #left-nav and #middle divs which are floated left and I've specified max-widths and padding.
When the window is below a certain width I'll remove the left nav with display:none, but until then I'd like the #main-content width to be fluid.
The left nav also needs to be a specific width to ensure the list items stay on one line.
Hope someone can help; it's probably something simple, but just can't make it to work..
Here's the CSS:
.right-nav {
padding:0 0 0 20px;
margin:0;float:right;
width:348px;
}
#main-content {
border: 1px solid #e3e3e3;
border-botom:0;
box-shadow: 0px -1px 18px #e0e0e0;
margin-top:-2px;
position:relative;
z-index:1;
float:left;
width:70.2%;
background-color:#fff;
height:100%;
float:left;
padding:30px 0 0;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
#left-nav {
float:left;
width:20.5%;
padding:15px 0 5px 20px;
background-color:#fff;
color:#888;
height:100%;
margin:0;
}
#middle {
width:72.3%;
background-color:#fff;
height:100%;
float:left;
margin:0 21px 5px;
}
error page: here
It's to do with the margins on your #middle element. Your widths are percentages but your margins are absolute values.
To give you an example, when you reduce the screen size down so #main-content is 824px wide, you end up with;
#left-nav: 20.5% = 168.92px plus padding-left = 20px;
#middle: 72.3% = 595.72px plus margin = 42px (21px either side)
Total = 828px and therefore #middle has to drop down below #left-nav
So it's a case of either reducing the percentages, making the margins percentages or adding a new #media screen style for those smaller widths.
*EDIT based on comments.
It's the same thing going on again - you're .right-nav element has a fixed width of 348px, the #main-content has a max-width of 67% but absolute padding of 20px either side;
So if the whole #content-wrapper has a width of 1069px you have;
.right-nav: 348px
#main-content = 716px; padding: 40px (20px left and 20px right).
Total = 1104px and the #main-content drops down. It's the mix of relative(%s) and absolute(pixels) that's causing the issues.