I have this CSS Code:
.topBar {
width:100%;
height:70px;
position:absolute;
/*position:fixed;
z-index:999;*/
top:0;
left:0;
padding:10px;
color:#000000;
background-color:#eeeeee;
border-bottom:2px solid #F36F25;
}
but because it is 100% wide and has a 10px padding it shows a horizontal scroll bar.
how can i stop this from happening but keep the padding and 100% width?
I have tried:
overflow-x: none;
in my css but i still want the horizontal scrollbar to show when the screen gets too small
Basically the div.topBar is 100% + 10px (x2). So it's actually more than 100% (hence the scroll box). The general way to do this is the add another div inside the parent div and add the padding:10px to that. Another way is to use box-sizing:border-box which actually honours the 100% rule!
Take a look at this sample.
You can use the box-sizing CSS property. Add this to .topBar : box-sizing:border-box;
.topBar {
width:100%;
height:70px;
position:absolute;
/*position:fixed;
z-index:999;*/
top:0;
left:0;
padding:10px;
color:#000000;
background-color:#eeeeee;
border-bottom:2px solid #F36F25;
box-sizing:border-box; /** <- Add this **/
}
<div class="topBar"></div>
This property includes padding (and borders if you have some) in the width you set to the element. so if you set width: 100%; it won't overflow the parent container anymore.
More info about box-sizing on MDN
Related
I have the below markup, the problem I am facing is with the :before psuedo selector, it isnt occupying all of height of the element it is applied to i.e. as shown in the plunk, the left red border applied in :before doesn't fully occupies the height. I need it to take the full height. How can I do that, I have been playing with elements height, line-height with text in it, but no luck.
Plunk - http://plnkr.co/edit/NPYntTDHeolsM89vYd2Y?p=preview
HTML:
<body>
<div>
<section>
</section>
</div>
</body>
CSS:
div, section{
margin:0;
padding:0;
}
div{
background:yellow;
width:200px;
height:30px;
}
section{
background:green; color:white;
width:50px;
height:30px; float:right;
}
section:before{
border-left:5px solid red;
content:"";
}
Since your element has a fixed height, it's simply a matter of setting the height of the pseudo-element to 100%, but you will additionally have to display it as a block because generated content is laid inline by default:
section:before{
border-left:5px solid red;
content:"";
display:block;
height:100%;
}
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
I have boxes floated inside a div sort of like the SO Chat except i am making a box for my own website where users can make their own chat room, these boxes on the page represent chatrooms and i want to make a perfect width for them so they will fit exactly on the page without any excess space in the margins. the main div they are positioned in is 965px with a padding of 15px on the left and right side of it making a 935px width i reduced the width from 965px to 935px to keep a total width of 965px.
To get an idea of my scenario check out A Fiddle
As you can see there is some space left at the end right side of the div and i dont want that, i want the chat boxes to fit pixel perfectly the full width and remember to take into account that borders count as widths too. If someone could help me that would be great!
CSS Styles
body {
width:1000px;
}
#Body {
width:935px;
padding:15px;
height:500px;
background-color:#F1F1F1;
margin:0 auto;
}
.ChatRoom {
float:left;
width:223px;
height:200px;
border:1px solid #666;
cursor:pointer;
margin-right:8.75px;
background-color:#FFF;
}
.ChatTitle {
width:100%;
height:30px;
line-height:30px;
font-size:13px;
font-weight:bold;
text-align:center;
background-color:#C6D6D9;
border-bottom:2px solid #9C0;
}
You can accomplish this using box-sizing:border-box. What it does is includes the padding and border sizes from the width, as opposed to its normal behaviour of adding to it (which makes the <div> overflow to the next line). I've added a div.Inner here which will have the border and white background while the .ChatRoom is used to provide space using padding.
jsFiddle
HTML
<div class="ChatRoom">
<div class="Inner">
<div class="ChatTitle">My Chat Room</div>
</div>
</div>
CSS
.ChatRoom {
float:left;
width:25%;
height:200px;
padding:8px;
box-sizing:border-box;
}
.ChatRoom .Inner {
border:1px solid #666;
box-sizing:border-box;
background-color:#FFF;
cursor:pointer;
height:100%;
}
Without border-box
Turns out it's pretty easy without border-box too, utilising margin on .Inner.
jsFiddle
.ChatRoom {
float:left;
width:25%;
height:200px;
}
.ChatRoom .Inner {
border:1px solid #666;
margin:8px;
background-color:#FFF;
cursor:pointer;
height:100%;
}
http://jsfiddle.net/DyTT8/1/
The last div needs to have the margin reset if not it will add to the 15px of padding. I did this by giving it class="last and making the .ChatRoom div 225px; This will give you the proper spacing.
You could also put the divs in an unordered list and target the last div with li:last-child and remove the margin that way.
I am trying to push down the boxes after the .slidetoggle panel is activated. But what happens is that it either goes over or under (depending on z-position) the positioned boxes. I want to it so that when the slidetoggle panel is activated, it will push down all of the boxes.
Here is the JSFIDDLE: http://jsfiddle.net/iqab/8QHdB/3/
And here is an example of the type of functionality I am talking about:
http://www.michaelnagy.at/
Replace the CSS with this. The modified lines are commented.
Other fixes applied (see comments in CSS).
.wrapper{
width:800px;
/*height:800px;*/ /*let wrapper auto resize itself based on contents height*/
border:solid thin #000;
position:relative;
margin:auto;
}
.wrapper .Boxes{
display:inline-block; /*fix for box overlap out of wrapper. replacement for "float:left" below*/
width:200px;
height:200px;
/*float:left;*/ /*fix for box overlap out of wrapper. replaced with "display:inline-block" above*/
border:solid thin #000;
margin:33px;
}
.wrapper .hbox{
width:734px;
height:400px;
border:solid thin #100;
/*position:absolute;*/ /*fix for panel overlap over boxes*/
top:33px;
margin:33px;
display:none;
background-color: #000;
}
I have a div within a div, and when viewing the web page in IE6, it does not display spacing between the bottom of div class="video-tour" and the bottom of div class="content-body"
Here is what it looks like in IE6: http://i42.tinypic.com/20zs7s7.png
Here is what it looks like displaying correctly in Safari: http://i44.tinypic.com/2h69de1.png
The css for .video-tour <-- there are multiple videos that are split up into different boxes as you'll see, they have a width of 31%
.video-tour {
float:left;
width:31%;
border:1px solid #fdbe2f;
background-color:#ffc;
text-align:center;
padding:3px;
overflow:auto;
margin:6px;
}
.video-tour img {
border:1px solid #fdbe2f;
padding:3px;
}
CSS for .content-body which .video-tour is within
.content-body {
padding:10px 15px;
font-size:.8em;
font-family:arial;
overflow:auto;
}
Any help as to why there is no spacing at the bottom in IE6 and spacing in other browsers would be helpful.
Try adding a div at the bottom after video-tour that has a style of clear: both.
I believe its because you need to clear the floats.
You could try place a
<div style="width: 100%; overflow: hidden;"><!-- floats go here --></div>
Around the entire content with video-tour's.