I have a really, really simple CSS question that has already been asked here a thousand times already in different forms, and seems to have no definitive answer.
I just want to create three columns on an HTML page, using CSS. Doesn't matter about fixed-width versus liquid: just need three columns.
Here's a complete HTML page:
<html>
<body>
<div id="left" style="float:left; width:300px;">
<h3>Column 1</h3>
</div>
<div id="right" style="float:right; width:300px;">
<h3>Column 3</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
</body>
</html>
In Chrome, at least, this is pushing the left & right columns down below the middle. What is wrong?
like this?: http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/
just float everything left, and have the columns flow in the normal order in your HTML.
<div id="left">
<h3>Column 1</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
<div id="right">
<h3>Column 3</h3>
</div>
css:
#left {
background-color: red;
float:left;
width:200px;
}
#middle {
background-color: salmon;
float:left;
width:200px;
}
#right {
background-color: pink;
float:left;
width:200px;
}
if you don't want them to wrap, you can wrap a container div around them, or use
body {
width: 600px; /*combined width of three columns*/
margin: 0 auto;
}
http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/1/
float is sensitive to order. Put the left, then middle, then right.
Have you tried floating the middle section too?
You might try this
<html>
<body>
<div id="left" style="float:left; width:300px;border:1px solid black;">
<h3>Column 1</h3>
</div>
<div id="middle" style='float:left;width:600px;border:1px solid black;'>
<h3>Column 2</h3>
</div>
<div id="right" style="float:left; width:300px;border:1px solid black;">
<h3>Column 3</h3>
</div>
</body>
</html>
Related
I want to vertically centre <div> tags that have a horizontal margin between each other.
The problem is that this behavior appears to be inconsistent between text-align: center and text-align: -webkit-center or text-align: -moz-center:
.parent {
display: inline-block;
border: 1px dotted #fd0;
position: relative;
}
.parent.ta {
text-align: center;
}
.parent.browser-ta {
text-align: -webkit-center;
text-align: -moz-center;
}
.child {
display: inline-block;
vertical-align: top;
}
.child > .content {
display: block;
margin: 0 10px;
border: 1px solid #888;
width: 200px;
text-align: left;
}
.wrong {
background-color: #e00;
color: #fff;
}
.right {
background-color: #0a3;
color: #fff;
}
<div>
Using <tt>text-align: center</tt>;
<div class="parent ta">
<div class="child">
<div class="content wrong">child 1 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content wrong">child 2 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child ">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
</div>
<br>
<br>
<div>
Using <tt>text-align: -vendor-center</tt>
<div class="parent browser-ta">
<div class="child">
<div class="content right">child 1 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 2 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
Run that snippet and the two similar HTML and CSS produce different layouts in Chrome (Webkit/Blink) and FireFox. The red panels are in the wrong location, the green ones are correct.
So text-align: -webkit-center and text-align: -moz-center appear to be correct (to me) but text-align: center appears to be bugged in both browsers.
Digging out the venerable old <centre> tag (that we're not supposed to use) and that works right too (though examining it reveals it uses the browser prefix too).
Is this correct? Is this a bug? Is there a reason for the difference? Which one should I use?
The prefixed values are described by MDN to be "block alignment values", which means block boxes themselves are aligned in addition to the inline content within them. This is the exact behavior of the <center> element, and the prefixed values are in fact intended for that element — if you look in the UA stylesheets for each engine you'll find a ruleset that says exactly center { display: block; text-align: -vendor-center; }.
The reason text-align: center is not implemented this way is because text-align is designed to affect inline-level boxes (as evidenced by the "text-" in its name), not block-level boxes. But that, I suspect, is not the answer you're really looking for.
What's happening is that the boxes that are actually being aligned in your snippet are the .content elements, which are block boxes, not inline-blocks. The reason that last element is being centred is because its parent, an inline-block, is being shrink-wrapped, and itself then centred by the text-align: center declaration in its ancestor.
I'm having a dilemma which is causing my website to be pretty ugly, what I'm essentially trying to do is make these tiles wrap nicely and show more tiles on one row dependent on the client's screen size.
Most of it works but it looks terrible if aligned to the center (Tiles center)
Text-align: center
Text-align: left
What I want it to look like:
http://puu.sh/d3Rpt/6d1550eaa3.png
As you can see, the left align looks more aesthetically pleasing but there is a massively ugly piece of white space, what I want to do is remove that white space or center the actual tile parent.
<div class='ioholder'>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
</div>
.ioholder
{
display:inline-block;
text-align:left;
padding:10px;
}
.imghold
{
vertical-align:top;
display:inline-block;
min-width:200px;
width:200px;
height:240px;
max-height:240px;
margin:4px;
text-align:left;
background-color:rgb(240,240,240);
border-style:solid;
border-width:1px;
border-color:rgb(175,175,175);
border-radius:2px;
}
This looks like a good use case for flex boxes. You can set different levels of importance to boxes so some will expand to fill blank space while others do not. There are a lot of excellent examples you can use to learn at css-tricks here http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am not sure I understand what you are trying to achieve so I added this to the CSS based on my understanding:
.ioholder {
display:inline-block;
text-align:center;
padding:10px;
}
.ioholder > .imghold{
float: left;
}
I recommend you tou use grid system, for example Yui3 Grid - http://yuilibrary.com/yui/docs/cssgrids/ - or some other grid system.
.imghold{
margin: 5px;
border: 1px solid black;
height: 100px;
}
.container{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.ioholder{
width: 100%;
background-color: #eee;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids/cssgrids-min.css">
<div class='ioholder'>
<div class='yui3-g container'>
<div class="yui3-u-1-6"><div class="imghold">one</div></div>
<div class="yui3-u-1-6"><div class="imghold">two</div></div>
<div class="yui3-u-1-6"><div class="imghold">three</div></div>
<div class="yui3-u-1-6"><div class="imghold">four</div></div>
<div class="yui3-u-1-6"><div class="imghold">five</div></div>
<div class="yui3-u-1-6"><div class="imghold">six</div></div>
</div>
</div>
You can also use responsive grid:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids-responsive/cssgrids-responsive-min.css">
and then
<div class='yui3-g-r'>
<!- ... ->
</div>
I'm trying to create a a table using a series styled div ID's in CSS. I'm having real trouble styling the divs. Could someone tell me if I'm approaching this the correct way?
Baring in mind the 'table' will be used to retrieve live data, well hopefully! so I may need the column widths to automatically adjust to fit the character length of a generated string.
-----------------------------------------------------------------------------------------
Top Column
-----------------------------------------------------------------------------------------
Column one | Column two | Column Three
HTML
<div id="container">
<div id="top_row">
<h3>Top row</h3>
</div>
<div id="column_one">
<h3>column one</h3>
</div>
<div id="column_two">
<h3>column two</h3>
</div>
<div id="column_three">
<h3>column three</h3>
</div>
</div>
CSS
#container {
display: table;
border:1px solid #dedede;
}
#top_row {
display: table-row;
}
#column_one, #column_two, #column_three {
display: inline-block;
text-align: center;
margin-top:50px;
margin-left: auto;
margin-right: auto;
letter-spacing:1.5px;
I don't see why not. I'd add a proper row for the bottom part, though:
http://jsfiddle.net/isherwood/jcg8Y/
<div id="container">
<div id="top_row">
<h3>Top row</h3>
</div>
<div id="bottom_row">
<div id="column_one">
<h3>column one</h3>
</div>
<div id="column_two">
<h3>column two</h3>
</div>
<div id="column_three">
<h3>column three</h3>
</div>
</div>
</div>
I would like to be able to align different sized images to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to have all the images aligned to the bottom of the footer-images div. Any help would be greatly appreciated.
try this
.footer-images img{
vertical-align:bottom;
border:0;
}
In Bootstrap v4 you can use the class align-items-end to achieve bottom alignment in a div. You can use this class on the row or on the column.
Example with all column content aligned to the bottom.
<div class="container">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Example with first column top, second colum middle and third colunm bottom alignment.
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Source: Bootstrap documentation.
Does this help?
<style type="text/css">
.footer-images {
margin: auto;
display: block;
position: absolute;
bottom: 0;
}
.footer-images .copyright {
text-align: center;
}
</style>
Using this HTML
<div class="container">
<div class="container">
<div class="footer-images">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/640x480">
<img src="http://placehold.it/120x120">
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
</div>
</div>
used to this css and apply
.footer-images img{
width:xxpx;
height:xxpx; // add here your style as like with height border etc.
vertical-align:top;
border:0;
}
More about bootstrap
It would be enough:
margin-top: auto;
See https://jsfiddle.net/d3jau1gx/
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>