I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
Related
I have 3 elements in HTML as follows:
.navigation {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 50%;
}
.sidebar {
display: inline-block;
width: 25%;
}
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>
This should fit in the 100% width of the container (<body> or any other <div>). However the .sidebar is being dropped to the next line. I tried to setup border, margin and padding to 0 with the !important definition (just to test) but the result is the same. How can I fit this 3 elements in the same line keeping the width property?
Thanks in advance for your answers.
As someone else mentioned, the issue is that when using display: inline-block, white-space - even between element tags - is accounted for in rendering. There are a few ways to get around this.
Setting display: table-cell rather than inline-block can work in a simple situation like this; just note that it prevents the blocks from wrapping
You can set font-size:0; on the parent to get rid of the whitespace, but you'll have to reset it on all the direct children.
Unless you have to support pre-IE10 browsers, I'd recommend flexbox here! You may need to add some browser prefixes, but the base would look like this (name your parent element something better than 'parent', though!):
.parent { display: flex; }
.navigation, .sidebar { flex: 1 }
.content { flex: 2 }
What that snippet is saying is "make the children fit, and make .content twice as big as the other two".
Even though you removed the padding, margin, and border, inline elements are actually sensitive to white space in the code itself. Remove that and they line up:
.navigation {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 50%;
}
.sidebar {
display: inline-block;
width: 25%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
<nav class="navigation">Navigation</nav><section class="content">Section</section><aside class="sidebar">Aside</aside>
When you're using display inline-block, it takes the space in your code as a character(space), so, you have 100% + the space required for 2 characters, you could keep the formatting of your code and ¨remove¨ the space between your containers setting the font-size of the parent to 0
.container{
font-size:0;
}
.container *{
font-size:12px;
}
.navigation {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 50%;
}
.sidebar {
display: inline-block;
width: 25%;
}
<div class="container">
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>
</div>
It's because you're using the style of display:inline-block which will recognize and create a space between element if your code have a space (either space, or new line), so what you need to do is just remove the space like answered by j08691 here
Or you can either remove the spacing by using a comment like this one
.navigation {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 50%;
}
.sidebar {
display: inline-block;
width: 25%;
}
<nav class="navigation">Navigation</nav><!--
--><section class="content">Section</section><!--
--><aside class="sidebar">Aside</aside>
Or other way around is using the style margin like in this example, the background is used to visualize the size of the the inline-block element only
.navigation {
display: inline-block;
width: 25%;
margin: 0 -0.4em 0 0; background: red;
}
.content {
display: inline-block;
width: 50%;
margin: 0 -0.4em 0 0; background: green;
}
.sidebar {
display: inline-block;
width: 25%;
margin: 0 -0.4em 0 0; background: blue;
}
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
<aside class="sidebar">Aside</aside>
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'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 have been trying to use display: inline-block; more often. I have two divs or images or whatever at inline-block level. I am vertically aligning them at middle. However, I would like to have one float left, and one float right - which breaks the spell. For example: a logo in a header on the left and a mobile navigation symbol on the right. I might as well just say that absolute positioning is not an option:
A FIDDLE is here: Thanks.
HTML
<header class="global-header">
<div class="logo">logo</div>
<div class="hamburger">☰</div>
</header>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body {
margin: 0;
}
.global-header {
position: relative;
width: 100%;
float: left;
padding: 1em;
background-color: rgba(0,0,0,.2);
}
.logo, .hamburger {
display: inline-block;
vertical-align: middle;
background-color: #f06;
padding: 1em;
}
.logo {
width: 12em; height: 5em;
}
.hamburger {
width: 3em; height: 3em;
}
One way of addressing this is to use text-align:justify. For this to work, the content needs to be more than one line long, so we have to add a second line of content using the :after pseudo-element. Then it's all about stopping the second line taking up any vertical space.
Add this to your css:
.global-header {
text-align:justify;
line-height:0;
}
.global-header:after {
content: '\A0';
display: inline-block;
width:100%;
line-height:0;
}
See http://jsfiddle.net/RZsyx/
Depending on what you are really putting in the logo and hamburger elements, you may need to apply a line-height to each of them.
Would the following give the desired result?
.hamburger {
width: 3em; height: 3em;
position:relative;
left:100%;
margin-left:-15em;
}
The -15 comes from hamburger width + logo width
I suppose you want to do a header for a mobile page.
you should try to use the box-model with box-orient and box-flex.
a good guide can be found here (it s in german though):
http://www.html5rocks.com/de/tutorials/flexbox/quick/
at the bottom is some kind of CSS-fiddle-box, so you can try if it
is the right choice for you.
the only drawback I can think of, is that you have do fill in another
element between .logo and .hamburger which gets the box-flex: 1.
leading you:
<header>
<div class="logo boxes">logostuff</div>
<div class="fill boxes"></div>
<div class="hamburger boxes">E</div>
</header>
with the following (additional) css
.boxes {
display:-moz-box;
background:#ff0000;
}
.global-header {
float: none;
display:-moz-box;
-moz-box-orient: horizontal;
-moz-box-align: center;
}
.fill {
-moz-box-flex:1;
}
I am trying to center a <ul> inside a <div>. I tried the following
text-align: center;
and
left: 50%;
This is not working.
CSS:
.container {
clear: both;
width: 800px;
height: 70px;
margin-bottom: 10px;
text-align: center;
}
.container ul {
padding: 0 0 0 20px;
margin: 0;
list-style: none;
}
.container ul li {
margin: 0;
padding: 0;
}
I want the ul to be centered inside the container.
Following is a list of solutions to centering things in CSS horizontally. The snippet includes all of them.
html {
font: 1.25em/1.5 Georgia, Times, serif;
}
pre {
color: #fff;
background-color: #333;
padding: 10px;
}
blockquote {
max-width: 400px;
background-color: #e0f0d1;
}
blockquote > p {
font-style: italic;
}
blockquote > p:first-of-type::before {
content: open-quote;
}
blockquote > p:last-of-type::after {
content: close-quote;
}
blockquote > footer::before {
content: "\2014";
}
.container,
blockquote {
position: relative;
padding: 20px;
}
.container {
background-color: tomato;
}
.container::after,
blockquote::after {
position: absolute;
right: 0;
bottom: 0;
padding: 2px 10px;
border: 1px dotted #000;
background-color: #fff;
}
.container::after {
content: ".container-" attr(data-num);
z-index: 1;
}
blockquote::after {
content: ".quote-" attr(data-num);
z-index: 2;
}
.container-4 {
margin-bottom: 200px;
}
/**
* Solution 1
*/
.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 2
*/
.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}
/**
* Solution 3
*/
.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 4
*/
.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/**
* Solution 5
*/
.container-5 {
display: flex;
justify-content: center;
}
<main>
<h1>CSS: Horizontal Centering</h1>
<h2>Uncentered Example</h2>
<p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p>
<div class="container container-0" data-num="0">
<blockquote class="quote-0" data-num="0">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2>
<p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p>
<pre><code>.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-1" data-num="1">
<blockquote class="quote quote-1" data-num="1">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2>
<p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don’t know the number of elements in a container for example.</p>
<pre><code>.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}</code></pre>
<div class="container container-2" data-num="2">
<blockquote class="quote quote-2" data-num="2">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2>
<p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p>
<pre><code>.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-3" data-num="3">
<blockquote class="quote quote-3" data-num="3">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2>
<p>Don’t use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p>
<p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p>
<pre><code>.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}</code></pre>
<div class="container container-4" data-num="4">
<blockquote class="quote quote-4" data-num="4">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2>
<p></p>
<pre><code>.container-5 {
display: flex;
justify-content: center;
}</code></pre>
<div class="container container-5" data-num="5">
<blockquote class="quote quote-5" data-num="5">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
</main>
display: flex
.container {
display: flex;
justify-content: center;
}
Notes:
It’s not a hack 👍👍👍
Browser support: flexbox
max-width & margin
You can horizontally center a block-level element by assigning a fixed width and setting margin-right and margin-left to auto.
.container ul {
/* for IE below version 7 use `width` instead of `max-width` */
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
Notes:
No container needed 👍
Requires (maximum) width of the centered element to be known 👎
IE9+: transform: translatex(-50%) & left: 50%
This is similar to the quirky centering method which uses absolute positioning and negative margins.
.container {
position: relative;
}
.container ul {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Notes:
The centered element will be removed from document flow. All elements will completely ignore of the centered element. 👎👎👎
This technique allows vertical centering by using top instead of left and translateY() instead of translateX(). The two can even be combined. 👍
Browser support: transform2d
IE8+: display: table & margin
Just like the first solution, you use auto values for right and left margins, but don’t assign a width. If you don’t need to support IE7 and below, this is better suited, although it feels kind of hacky to use the table property value for display.
.container ul {
display: table;
margin-right: auto;
margin-left: auto;
}
IE8+: display: inline-block & text-align
Centering an element just like you would do with regular text is possible as well. Downside: You need to assign values to both a container and the element itself.
.container {
text-align: center;
}
.container ul {
display: inline-block;
/* One most likely needs to realign flow content */
text-align: initial;
}
Notes:
Does not require to specify a (maximum) width 👍
Aligns flow content to the center (potentially unwanted side effect) 👎
Works kind of well with a dynamic number of menu items (i.e. in cases where you can’t know the width a single item will take up) 👍
Make the left and right margins of your UL auto and assign it a width:
#headermenu ul {
margin: 0 auto;
width: 620px;
}
Edit: As kleinfreund has suggested, you can also center align the container and give the ul an inline-block display, but you then also have to give the LIs either a left float or an inline display.
#headermenu {
text-align: center;
}
#headermenu ul {
display: inline-block;
}
#headermenu ul li {
float: left; /* or display: inline; */
}
ul {
width: 90%;
list-style-type:none;
margin:auto;
padding:0;
position:relative;
left:5%;
}
You can check this solved your problem...
#headermenu ul{
text-align: center;
}
#headermenu li {
list-style-type: none;
display: inline-block;
}
#headermenu ul li a{
float: left;
}
http://jsfiddle.net/thirtydot/VCZgW/
ul {
text-align: center;
list-style: inside;
}