explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
Related
When I resize my webpage everything goes out of position. The text goes below the container and the image get too wide. How can I make it so everything stays in place when the image gets resized? I looked at a few solutions but none seemed to work for me. Any help would be appreciated!
body {
background-color: #ADD8E6;
padding: 10px;
margin: 0;
}
.hcontainer {
background-color: #FFFFE0;
height: 600px;
text-align: center
}
div h1, p {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0;
}
img {
margin: 0;
padding-top: 20px;
}
#mini {
font-size: 13px;
margin-top: 5px;
}
.imgcontainer {
background-color: pink;
}
.mcontainer {
background-color: #FFFFE0;
height: 600px;
margin-top: 20px;
padding-top: 30px;
}
li {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
h3 {
text-align: center;
}
.list {
width: 50%;
margin-left: auto;
margin-right: auto;
}
h4 {
text-align: center;
padding-top: 20px;
Use percentages instead of px, this will make any elements a relative size when resizing the window.
Use percentages instead of Pixels, And be careful the width of all the components companied should be 100%.
So all the components width, the paddings, the margins even the borders counts! All companied should be 100% at the width.
Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.
Another thing I recommend to you to learn and use Bootstrap to make responsive website to all platforms.
I have 3 sections within an article, I have the first 2 side by side at 40% width each. One float left, and another right. I cannot get the third section id: interests, to be centered below the 2. I want some margin top to give some space. Also when I minimize the screen it also drops into the footer. Any suggestions, thanks
http://jsfiddle.net/sy8o4vbt/
#interests {
width: 90%;
border: thin solid #000000;
margin-right: auto;
float: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
clear: right;
margin-top: 103px;
margin-left: auto;
}
fixed this with appropriate CSS:
#interests {
width: 100%;
margin-top: 20px;
}
#interest_inner_div{
width: 60%;
border: 1px solid;
margin: 10px auto;
}
JSFiddle Link http://jsfiddle.net/7mzp80gg/
The header in the pic is styled in 3 parts the top part contains a div with the width 100% and background color and inside the dive there is a div styled as a container which holds all elements at the top. This container has a width of 1000px and min-width of 960px and margin: 0 auto;
but when u re-size the browser and scroll with the scroll-er at the bottom the header appears as follows.
What am I doing wrong here for it to render this way?
CSS
#header {
height: 120px;
width: 100%;
margin-bottom: 15px;
}
#header .nav-content-holder {
width: 1000px;
min-width: 960px;
margin: 0 auto;
}
#header .header-menu-top {
height: 20px;
background-color: #d8d4cf;
color: #Color-Txt-black;
}
#header .header-menu-middle {
height: 70px;
background-color: #Color-FM-brown;
color: #Color-Txt-white;
}
#header .header-menu-bottom {
border-top: 1px solid #d3d3d3;
height: 28px;
background-color: #Color-FM-brown;
margin-bottom: 15px;
color: #Color-Txt-white;
}
HTML
Without code it is impossible to know what is going on but you need to try min-width: 1040px; on body.
So im feeling pretty stupid that I can't figure this out but my problem is as following:
I got a footer and inside the footer I have 2 divs, 1 containing a Facebook image and 1 containing copyright text. What I want to do is float them next to each other, but align the Facebook image to the left and the text to the center.
Html:
<div id="footer">
<div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
<div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>
Css:
#footer {
width: 960px;
height: 50px;
margin: 0 auto;
}
#facebook {
width: 29px;
height: 29px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
#footerText {
float:left;
font-size: 11px;
text-align: center;
margin: 20px auto 20px auto;
}
You could give both divs an additional "wrapper" within the footer: http://jsfiddle.net/y9xpA/
#wrap {width: 400px; margin: auto;}
Your text in #footerText will not be centered because #footerText doesn't have a specified width. Its width is currently auto, which is default, so it will shrink to the width of the text inside; neither text-align:center or automatic side margins will fix this, as I can see you've tried.
If you want #facebook floating all the way to the left of the footer, you can give the remaining width of the footer to #footerText:
#footerText {
float:left;
font-size: 11px;
text-align: center;
width: 931px;
margin: 20px 0;
}
You can try using absolute position to move the Facebook div out of the flow of the page and to the left, then giving the footer text a left margin equal to the facebook div's width and centering it:
#footer {
width: 960px;
height: 50px;
position: relative;
}
#facebook {
width: 29px;
height: 29px;
position: absolute;
left: 0;
}
#footerText {
font-size: 11px;
text-align: center;
margin: 20px auto 20px 29px;
}
Demo
It'd be much, much easier to just give the #footer a text-align:center and set the other elements inside it to display:inline. Check out a demo: http://jsfiddle.net/pUKwJ/
#facebook:
{
display: inline-block;
text-align: center;
}
#footer-text
{
display: inline-block;
text-align: center;
vertical-align: center;
}
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/