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.
Related
I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
#sponsors {
float: right;
display: inline;
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
<div id="sponsors">
<img src="images/sponsors/1.png">
<img src="images/sponsors/2.png">
</div>
I can't move images to the right side of div with this, but div align="right" works.
How can I set images to right side using css3?
Change the display to block and add text-align:right
#sponsors {
float: right;
display: block; /* or remove this line, as block is default for div */
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
Display inline doesn't make much sense on elements with a width and a height sepcified. I assume you want the browser to respect your width and height so display should be block, or be removed completely as it is a div element which implies display:block by default. Then you want the elements inside the div to align to the right, which you do by applying text-align.
Try this:
#sponsors a img {
float:right;
}
Currently you are floating the sponsors div to the right, instead of the images inside the sponsors div. Target the images to float them, and it should work for you.
The images themselves need to be floated or their parent element needs to have its text alignment modified.
Floated: http://jsfiddle.net/MAz4Q/1/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
#sponsors img {
float: right;
}
Aligned: http://jsfiddle.net/MAz4Q/2/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
I have a footer content that is overlapping the wrapper div in my css and html, when I changed height to auto it didnt work.
below is an example of the page I'm working on.
Wrapper CSS
#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}
Footer CSS
.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;
}
Example
You need to clear your floats in the .content_left and content_right columns and remove the height associated with your #wrapper:
http://jsfiddle.net/L6acE/3/
There's a few different methods for clearing floats. I went with a real simple method of just adding a <div style="clear:both;"> after both columns as discussed here:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
But I'd generally use a clearfix method discussed here:
http://nicolasgallagher.com/micro-clearfix-hack/
I also added in some word-wrap:break-word CSS for your left column to wrap all your dummy content.
You can see an example here:
http://users.telenet.be/prullen/portfolio_test.html
I have set a padding of 100px (all directions) to the portfolio_item class (3 items on that page). The top, bottom, and left paddings are applied. But the right padding doesn't seem to work; the text extends beyond the boundary of the div.
.portfolio_item {
width: 100%;
clear: both;
display: inline-block;
padding: 100px;
}
I have tried changing the div to a float:left instead of display:inline-block but that didn't help.
Ideas are appreciated.
Thank you,
Wesley
Applying box-sizing: border-box; on your .portfolio_item should fix the issue. You'll have to include some specific vendor prefixes for this to work on all modern browsers:
.portfolio_item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Little demo: little link.
More than one parent element (.out anb .in) has overflow: hidden; applied. The overall container is set to a width of 800 pixel and thus the right side of the content is hidden. The padding itself works – you just don't see it in your current setup.
<div style="width:800px; border:2px dashed red;">
<div class="out">
<div class="in">
<!-- … -->
You set the width of the inside to 100%, but with the padding the width is actually 100% + 200px. I would recommend changing
width: 100%;
To
width: 600px;
Or changing the padding to a percent like:
width: 80%;
padding: 10%;
Instead of applying the padding to the div, target the text specifically. Place the text in a 'p' tag and call it in the CSS.
.portfolio_item p{
padding: 100px;
}
you can give like this,
.portfolio_item {
clear: both;
display: inline-block;
padding: 100px;
width: 87%;
}
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.