I'm building a tile-based portfolio Wordpress theme, and I can't get the tiles to center correctly in their parent div. Here's the static page (I'm migrating from .cu.cc asap). I've used inline-block to align them all on one row, and there are margin styles to keep the gaps between the tiles, but what I'm getting is this (red lines added):
I'd like to align the tiles flush to the red lines - how can I do it?
Here's a boiled down version of the HTML:
<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
And the CSS:
.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}
Thanks, Oliver
I'll add to Karl-André's answer by noting that :last-child is not supported in IE8, so it would be nice to switch to
.content-wrapper .tile {
margin-left: 10px;
}
.content-wrapper .tile:first-child {
margin-left: 0px;
}
Even more clever decision is to use the following:
.content-wrapper .tile + .tile {
margin-left: 10px;
}
Just three lines instead of six, elegant and works everythere.
Also, if you're bored of manually typing margin and want justify-like behaviour, consider
Fluid width with equally spaced DIVs.
Try adding this :
.tile:last-child{
margin-right : 0;
}
You div are centered, but the last div margin is messing up the elements
Related
I am trying to create two sections, one left and one right, where one of them is a image and the other one is text. They should always be the same width and height and always square. I use the Avada theme on Wordpress and trying to fix this with their Element Builder and custom css. No luck.
Here is a page where the resault is not square but responsive:
https://sundlof.se/devskargard/
I have found some codes that does force div to be square but they don´t take the other square in to the equation. If this requires jQuery, please tell me, I have not yet tried that, I really what to get this done with css if possible.
Any ideas will be much appreciated!
Regards,
Fredrik
You can use display:flex to on the square wrapper and give it a height. This will always result in flex-child taking height of its immediate flex parent.
You can then plugin some media-queries to make this flex grid responsive using flex-wrap property
body {
padding: 20px;
box-sizing: border-box;
}
.flex {
display: flex;
justify-content: center;
border: 1px solid black;
height: 250px;
}
.section {
align-items: center;
width: 50%;
border: 1px solid black;
margin: 5px;
}
<div class="flex">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
</div>
You Just go through following links then you will get an idea about the aspect ratios and responsive blocks.
Learn how to maintain the aspect ratio of an element with CSS.
Aspect Ratio Boxes Advanced
<div class="container">
<div class="text">1:1 Aspect ratio</div>
</div>
.container {
background-color: red;
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
Example
Thanks for the help!
I ended up to justify the square with media querys every 200 och 300px to keep it close to square. Not a beautiful solution, but a simple one.
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.
Something like this:
This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container
I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.
Here's what I've tried:
CSS:
.line
{
display:inline-block;
border-bottom:2px #5B3400 solid;
margin-left:5px;
width:80%;
}
HTML:
<h2>Our Mission<span class="line"></span></h2>
Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?
I know this should be easy but I haven't been able to find a solution yet.
Thanks!
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2> is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the <h2> tag acts as a container for a floated element.
the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.
the <hr /> acts as the line, and fills up the remaining space to the right.
THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:
HTML:
<h2 class="line-title"><span>This is my title</span></h2>
CSS:
.line-title {
border-bottom: 1px solid #DDD;
font-size: 20px;
height: 12px;
margin-bottom: 10px;
}
.line-title span {
background: #FFF;
padding-right: 10px;
}
You can see a working example here: http://jsfiddle.net/yYBDD/
How it works.
the <h2> tag has a class that sets the height to half of the height of the text it contains.
the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).
the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.
And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.
You could use flexbox to do this.
http://jsfiddle.net/eHHep/ (prefixes not included)
<h1 class="lineme">This is my header</h1>
<h2 class="lineme">This is another header</h2>
.lineme {
display: flex;
}
.lineme:after {
display: block;
content: " ";
border-bottom: 1px solid;
flex: 1 1 auto;
}
Advantages over other methods:
No extra markup required
Background color is not required
Down side:
Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
Your line goes away if your text wraps around
HTML:
<h2><span>Our Mission</span></h2>
CSS:
h2{
border-bottom: 1px solid #000;
height: 20px;
overflow: visible;
display: block;
width: 100%;
}
h2 span{
display: inline-block;
background: #fff;
height: 21px;
}
This way it'll overflow on the bottom border as it has bigger height.
Demo: http://jsfiddle.net/afuzk/
Here's something I tried and that worked:
HTML
<h2>Our Mission</h2>
CSS
h2:after
{
content: "\00a0";
border-bottom: solid 2px black;
position: fixed;
top: 0;
width: 100%;
margin-left: 3px;
}
The JS Bin to test: http://jsbin.com/ayuvuc/4
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/