I have this HTML:
<div id="container">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
and this CSS:
#container {
overflow: hidden
}
article {
float:left;
height: 200px;
width: 200px;
background-color: red;
margin: 5px;
}
I want to center the #container without specifying a width. Is it possible?
Here is the Fiddle.
Edit:
I need the width of the #container to change to fit the articles. If the body is 450px width then there will be two articles per row, so the width of the container should be 400px aprox. If the body is 1100px width then ther will be five articles per row, so the width of the container should be 1000px aprox.
You could try something like this (jsfiddle):
HTML:
<html>
<body>
<div id="container">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
</body>
</html>
CSS:
html, body { margin: 0; padding: 0; }
body { text-align: center; }
#container {
overflow: hidden;
margin: 0 auto;
width: 90%;
text-align: left;
}
article {
display:inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 5px;
}
update 2015
I noticed there was a slight issue with the previous set-up. In that keeping the articles within the first placeholder doubled up the margins. This led to slight inconsistencies when resizing the page across each article wrap point.
This updated fiddle gets rid of those issues:
http://jsfiddle.net/C4fbX/4/
However, this kind of layout could very likely be achieved in a nicer way with Flexbox these days.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered 2012
The following method works, however it is a little mad. It's rather annoying that this isn't something that CSS can handle easily:
fiddle
http://jsfiddle.net/C4fbX/
method
This method works on the basic idea posted by Nick, and uses this method to then position a left floating system... which fixes the problem where you always end up with center aligned elements within the centered container.
So instead of:
[][][][]
[][]
You get:
[][][][]
[][]
The following stipulations are required:
You need to include as many placeholder elements as you have articles. The method uses these to calculate where to indent the articles from. This also means that the width and horizontal margin/padding of the placeholder elements has to match that of the articles.
The articles need to be placed within the first placeholder.
In order to get around the whitespace issue with regard to inline-block, the font-size and line-height are zeroed out, which means they have to be manually set again for the articles. You can get around this by removing these zeroed attributes from the css and just making sure your placeholder markup doesn't have any whitespace.
I very much doubt this will work in older browsers - but seems to in the current modern ones.
Relying on position absolute means that your articles wont take up their usual space in the document, so you'd have to account for this in your design or set a fixed height on your #container element
mark up
<div class="container">
<div class="placeholder">
<div class="position">
<article>a</article>
<article>b</article>
<article>c</article>
<article>d</article>
<article>e</article>
</div>
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
css
.container {
font-size: 0;
line-height: 0;
text-align: center;
}
.placeholder {
display: inline-block;
width: 200px;
margin-left: 5px;
margin-right: 5px;
height: 0px;
}
.position {
position: absolute;
}
article {
font-size: 12pt;
line-height: 1.2em;
float: left;
margin: 5px;
width: 200px;
height: 100px;
background: red;
}
Do you mean centre the articles within the container, whilst allowing them still to wrap? In which case (jsfiddle):
#container {
text-align: center;
}
article {
display:inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 5px;
}
After considering several options, I found that using media queries is the simpler way to do it.
In this case it will be something like this:
#media (max-width: 420px) {
#container {
width: 210px;
}
}
#media (min-width: 420px) and (max-width: 630px) {
#container {
width: 420px;
}
}
#media (min-width: 630px){
#container {
width: 630px;
}
}
Here is the fiddle.
Take out float: left; and add margin:auto;
Related
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.
The html looks like this:
<div class="parent">
<div class="font" id="left"></div>
<div class="font" id="right"></div>
</div>
CSS looks like this:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
height: 100%;
}
#right {
width: 50%;
background: orange;
display: inline-block;
height: 100%;
}
.parent{
font-size:0;
margin: 0;
height: 40px;
}
.font{
font-size:16px;
}
font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).
This works fine. It keeps working when I add content to both the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.
Here's the JSFiddle with content in the left block: https://jsfiddle.net/dave_s/phon1tws/
I've also tried overflow:hidden, but that shrinks the block with the content.
Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!
Thanks a lot!
One way is do use flexbox. Codepen example. Note the support for flexbox and use prefixes.
.parent {
display: flex;
}
add this in css
#left, #right{float:left;}
Alternatively, you can use CSS tables. Your mark-up lends itself nicely to the technique.
The main advantage is that you don't have to alter the font sizes to compensate for the white space that can show up between inline blocks.
Having said that, both approaches will work in your situation.
body {
margin: 0;
}
.parent {
display: table;
width: 100%;
height: 40px;
}
#left, #right {
display: table-cell;
vertical-align: top;
width: 50%;
height: 100%;
}
#left {
background: lightblue;
}
#right {
background: orange;
}
<div class="parent">
<div class="font" id="left">Left Blue</div>
<div class="font" id="right">Right Orange</div>
</div>
Take a look to this really nice guide about Flexbox. Nowadays it's the clearest way to build a layout.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will work:
.font {
font-size: 16px;
vertical-align: top;
}
By default baselines are vertically aligned. If the <div> is empty, its bottom line will be its baseline. Otherwise the baseline of the first line of text is the baseline to be aligned with.
This problem exists even when there are words in both <div>s but having different font-sizes.
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
I'm currently using 1 table to align 2 main portions of the site. It's causing problems for me now, so I'd like to use pure CSS.
I have a 205px wide navbar column on the left. Occupying the rest of the space on the right, I'd like to have a container (So on the right side of the screen, taking up screen width - 200 pixels) This container would not have a fixed height, but I want its top to be aligned with the top of the navbar.
Here's a demo of what I currently have .
I would like the solution to be similar to that, but not use tables, and have the top of the container aligned with the top of the sidebar.
I've made several attempts at doing this (before I started using the table, and after) but none of them even remotely worked. I've come here as a last resort, so I hope that someone could help.
Fiddle
.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
width:40%; height: 100%; display: table-cell; background: #ccc;
}
#sidebar2{
width:60%; height: 100%; display: table-cell; background: #f00;
}
body, html {
height:100%;
}
HTML
<div class="container">
<div id="sidebar">links and whatnot go here</div>
<div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>
</div>
Note: table-cell property is supported by supports IE8+
EDIT:
If you can't use table-cell then you have to use some jquery to calculate height. Check this Fiddle
I would do something like this:
. HTML:
<div id="container">
<aside id="sidebar">Links and whatnot</aside>
<section id="content">Content and whatnot</section>
</div>
. CSS:
html, body {
width: 100%;
height: 100%;
}
div#container {
height: 100%;
}
aside#sidebar {
background-color: #f00;
width: 205px;
min-height: 100%;
float: left;
}
section#content {
background-color: #0f0;
min-height: 100%;
}
You can see it working in this fiddle.