I am currently making a website without using framework however I have run into a problem. My divs are not getting centered within the container even though the container itself is centered in the body.
Html
<body>
<div id="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Css
#content{
width: 90%;
height: 100%;
margin: 0 auto;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
The divs are perfectly centered when I have my window to full width, but once I resize it, they just reorganize without centering.
Before resizing:
http://cl.ly/image/241R2I24280w/Screen%20Shot%202014-09-26%20at%2021.49.23.png
After resizing the window: http://cl.ly/image/2y2g2W0n230g/Screen%20Shot%202014-09-26%20at%2021.50.21.png
I have tried different methods to solve it, such as doing margin: 0 -10%; and margin: 0 25%;
When it comes to positioning I get confused.
Thanks.
Just change your CSS like this, this way you can adapt your boxes in many ways and they will react to responsive layouts as expected:
#content {
width: 90%;
height: 100%;
margin: 0 auto;
text-align:center;
display:block;
}
.box {
width: 45%;
height: 150px;
display:inline-block;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px 2%;
}
See fiddle here
Explanation:
I have removed your floats, used block elements and replaced your fixed sizes by percentages. Then, I used a text-align:center property in your container box #content so everything is nicely aligned in the center of that container. Now, if you resize, columns will take 45% of the width of the screen, but you can obviously change the behavior via media queries and use something like .box{display:box} for small screens
There are multiple solutions to your problem. Depending on what you have inside those boxes this might be the simplest one: text-align:centerwith a display:inline-block combo; See here.Fiddle
2 solutions :
You can use a percentage for the width your boxes.
#content{
width: 90%;
height: 100%;
margin: 0 10%;
}
.box{
width: 30%;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Boxes will resize with the content but the stuff in the boxes might look weird in small sizes.
Or
You can use a pixel value for the width of your content.
#content{
width: 1200px;
height: 100%;
margin: 0 10%;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Width of boxes will not change while resizing, nor the stuff in it, but that can be painful on small screens.
add auto margin for your box
.box{
width: 400px;
height: 150px;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin-top: 13px;
margin-left:auto;
margin-right:auto;
}
I made your files on my machine and the divs are not centered so I assume your screen or resolution settings are different, or your content container is within one or more other divs?
Anyhow, try adding 'clear:left;' in your box class code and it should resolve your issue (put it just above the 'float:left' line. good luck!
Related
I am very new to CSS, so excuse my naive mistakes.
Goal: Trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. If you resize the browser window by pushing it to the left, you will see what I am talking about.
Also, side question: If I were to add an Image in the header, would the same (potential) solution apply? If you're curious about this kind of lay-out, I am trying to edit my "Tumblr" layout and I want to make it responsive (it's a private tumblr blog that I experiment on, I am not trying to make it responsive on cell phones / tablets – yet.)
Here is this JSFIDDLE: http://jsfiddle.net/yrbvw473/2/
HTML
<div id="container">
<div id="header">This Is The Header</div>
<div id="content">
<div class="post">A</div>
<div class="post">A</div>
<div class="post">A</div>
</div>
</div>
CSS
#container {
border: 0px solid;
max-width: 640px;
padding-left: 50px;
padding-right: 50px;
margin: auto;
display: block;
overflow-x: hidden;
}
#header {
margin-top: 0px;
margin-bottom: 0px;
position: fixed;
background-color: grey;
width: 640px;
z-index: 1;
text-align: center;
display: block;
}
#content {
width: 100%;
overflow-x: hidden;
clear: both;
border: 1px solid;
margin-top: 50px;
}
.post {
margin-bottom: 45px;
width: 100%;
border: 1px solid;
margin-top: 50px;
text-align: center;
}
Thank you for all the help! Again, I am new too this...
Comment or remove this position: fixed; on #header. And change width to max-width: 563px;
bcause u put the value of header width, that's why the header cannot flexible following browser width. use width:100% instead
SEE FIDDLE
I'm trying to create a single sentence in some kind of a field I created, and every time I just make the font bigger it pops out of the field, and I gotta lower the font-size to put it inside again.
Can I make the font size bigger and keep it in the field at the same time?
My code:
HTML:
<div id="wrapper">
<h1 style=""> Nothing Created Yet </h1>
</div>
CSS:
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
background-color: #F0EEF3;
border-color:red;
}
What I get:
You firstly need to remove the browser-default margin styling on your h1 element:
#wrapper h1 {
margin: 0;
}
Then you should ideally give your #wrapper element a line-height equal to its height:
#wrapper {
...
height: 120px;
line-height: 120px;
}
JSFiddle demo.
try this DEMO
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
line-height:10px;
background-color: #F0EEF3;
border-color:red;
text-align:center;
}
The reason why this happens is you set fixed width and height for the DIV and when you increase the font size, it could no longer fit inside the DIV. So, the answer is it is impossible in fixed size DIV like this.
or do
-added class to the header and put the margin to 0 and center the text
(jsfiddle.net/6GRGH/)
I'm making a site and trying to center the image head. However, it doesn't appear to be working.
Here is the HTML:
<body>
<div id="templatemo_header">
<div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>
</div>
</body>
And the CSS:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 762px;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
width: 762px;
margin: 0 auto;
}
I tried to add margin: 0 auto; to the image, but it still is not centered. How can I do this?
Modify the css for the div containing your image with:
margin: 0 auto;
width: 100%;
Add the following to your CSS file:
.image { width:762px; margin:0 auto;}
Your wrapping div is the same width as the image, this stops any margins from being automatically applied since there is no space.
There are a few ways to fix this, but easiest would be to set the width of templatemo_header (the wrapper div) to 100%. This way the image margins can expand, thereby centering the image.
So in your css, modify the width from 762px to 100%, like so:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 100%;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I want to achieve the following effect: http://jsfiddle.net/3KJta/1/
However the solution I have uses a known width for the small div and the larger div. I need this to work with variable sized divs. The use case for this is a tooltip that appears above a smaller flexible sized element. The tooltip content isn't known and so the width could be anything.
So far I have:
<div class="small">
<div class="smaller"></div>
<div class="larger"></div>
</div>
and
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
}
.small {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 50px;
text-align: center;
}
.smaller {
width: 20px;
height: 20px;
border-color: red;
display: inline-block;
}
.larger {
width: 200px;
height: 200px;
border-color: blue;
display: inline-block;
margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}
If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).
See this example: http://jsfiddle.net/2SQ4S/1/
If you use and extra element you can do it:
<div class="small">
<div class="smaller"></div>
<div class="larger">
<div>I'm extra</div>
</div>
</div>
CSS
.larger {
position:relative;
left:50%;
width:8000%;
margin-left:-4000%;
text-align:center;
border:none;
}
.larger div {
width: 200px;
height: 200px;
border-color: blue;
margin:auto;
}
http://jsfiddle.net/3KJta/4/
although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:
http://jsfiddle.net/3KJta/7/
All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.