I have a title bar with a content div beneath it, that I would expect to match in width. The content div, however, appears to be offset very slightly to the left, as well as being slightly narrower as evidenced on the right hand side in this image:
The title div also has a little dynamic JS to make it "stick" to the top of the page, thus the "stick" portion of the css is also included.
Title div
#menu {
margin-top: 10px;
padding: 0.5ex;
width: 100%;
background-color: #0B0000;
color: #ffffff;
height: 16px;
}
#menu.stick {
margin-top: 0 !important;
position: sticky;
top: 0;
z-index: 10000;
}
Root background
#bodystyle {
background-color: #efefef;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding-left: 20px;
padding-right: 20px;
}
Page Content
#pagecontent {
/*width: 100%;*/ <=== This being set does not remedy the problem.
padding-left: 7%; Instead the div expands to the right hand
padding-right: 7%; edge of the page.
padding-top: 3%;
background-color: #ffffff !important;
}
Could the edge of the title possibly be affected by the text padding? I would have thought not, myself. Or, is this expected behaviour? Ideally I would like both sides of both title and content divs to be utterly uniform.
To answer here.
So what you want to do is add box-sizing to all alements:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
this could go just after your css reset. This way when you set the width of an element, that's the width that it is, as padding is now happening inside that width.
Next for height, you have 2 options, fixed height of that nav or to add padding to it. I would go with fixed height and also add line-height to be same height in order to center text in it.
Thats it.
Related
On my site.
If you click on one of the points on the map, you'll get a popup:
How do I widen the content area without affecting the size of the popup?
Whatever I do, only the size of the popup changes in this code:
.leaflet-popup-content {
margin: 12px 18px;
line-height: 1.4;
}
Is there a workaround for this?
Remove 18px for margin left, and right
.leaflet-popup-content {
margin: 12px 0;
line-height: 1.4;
}
And remove negative margins for the button
.event a.rsvp {
margin: 0;
}
You will have this result
<div class="leaflet-popup-content" style="width: 261px;">
change this 261px to xxxpx
or
.leaflet-popup-content { width: xxxpx !important;}
for .leaflet-popup-content-wrapper you are not setting any width, and for .leaflet-popup-content you are explicitly setting the width of 261px.
So for this one-two solutions are there
Solution 1
.leaflet-popup-content-wrapper{
width: 313px;
padding: 20px;
box-sizing: border-box;
}
and remove the explicit width for .leaflet-popup-content, but the problem is when the content becomes more it will make issue
Solution 2
Add the padding as explicitly to the .leaflet-popup-content so for this one once you add explicitly
.leaflet-popup-content{
width: 261px; // explicit width
padding: 20px;
box-sizing: border-box;
}
I hope this will solve the issue
i have a header that has one div and two spans inside it:
<header class="page_header">
<div id="title">Some title</div>
<span id="user">User: <i>${username }</i></span>
<span id="search"/><input type="text"><input type="submit" value="Search"/></span>
CSS styling for header content is:
.page_header {
padding: 30px;
margin: 10px;
width: 940px;
}
.page_header #user {
float: left;
margin: 0;
}
.page_header #title {
text-align: center;
font-size: 24px;
}
.page_header #search {
float: right;
text-align: right;
}
Underneat the header is navigation bar. The problem i am having is that my header content is shifted to the right side a little, comparing to navigation bar, and i cant find a way how to fix this. You can see HTML and CSS code here: http://jsfiddle.net/vvozar/QU542/1/
Appreciate any help or advice.
Add box-sizing: border-box to your .page_header class.
FIDDLE
.page_header {
padding: 30px;
margin: 10px 0;
width: 940px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
In page_header, you need to either (in order of technical preference)
Remove the width and let it auto size, or
Set the width to 880px to account for the 60px of padding around the inside or
Remove the padding and leave the width as 940px.
Your body is also fixed to 940px and technically the inside of page_header only has 880px to work with, so, 940px pushed it outside of its limits, or, in this case, out the right side of the div.
I'm having some issues with aligning 3 divs beside each other.
http://jsfiddle.net/Lpprn/
I have a strong feeling it's in the syntax, but I can't for the life of me figure it out.
#story-container {
width: 700px;
padding: 0px;
margin: 0 auto;
}
#story-left {
width: 300px;
padding: 10px;
padding-right: 0px;
float: left;
text-align: right;
margin: 0;
background-color: #000000;
}
#story-center {
width: 100px;
float: left;
margin: 0;
background-color: #ffffff;
}
#story-right {
width: 300px;
padding: 10px;
padding-left: 0px;
float: left;
text-align: left;
margin: 0;
background-color: #808080;
}
Thanks for your help!
The containing elements don't add up to the width of the parent, 700px.
This is because padding is added to the width of the children elements.
Therefore, 300px + 10px + 100px + 10px + 300px != 700px
You would either have to subtract the padding values from the widths, or use something like box-sizing, which changes the box model of an element, thereby causing its padding/border properties to be calculated into its width/height.
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
border-box: The width and height properties include the padding and border, but not the margin.
From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I added the following to each element, though it actually wouldn't be needed on the middle element, #story-center, as it currently doesn't have any padding.
jsFiddle example - it works now - (red background added to display the parent container)
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
Why does the search box here not have 15px padding to the right?
This is the CSS:
#element_right {
padding: 120px 15px 0px 0px;
color:#161514;
font-family:helvetica, sans-serif, Arial;
font-size: 13px;
background: #f4f4f4;
width: 270px;
height: 100%;
float: right;
}
I'm using Chrome
This should work (if that's what you're really trying to achieve):
#element_right {
padding: 120px 35px 0px 0px;
color: #161514;
font-family: helvetica, sans-serif, Arial;
font-size: 13px;
background: #F4F4F4;
width: 270px;
height: 100%;
float: right;
}
To reach your effect, setting margin is a more suitable way.
Of course, it would be in conflict with the width as your child element with 280px of width break the entire structure.
I suggest you to remove the width in child element and make width effect at #element_right with a 295px of width the same with boxes below.
So the search box's width and horizontal position would exactly be identical to the boxes below besides the border and box shadow.
EDIT: Delete misleading answer.
Just check with opera, and your 15px padding works, you are just filling it with the search bar
The width of the contents of the search div doesn't leave room for padding, Shrink your input to width:190px