I'm somewhat experienced in html/css coding, but more in the "old school" sense.
My question: When I use display: inline-block on two divs, they stack on top of each other, despite the fact that they have a defined width and height. and lots of room to float beside.
Any advice would be greatly appreciated.
(I would attach file to view but it is long, more than willing to zip and send for help)
Cheers
Please see this simple example may be help you to resolve your problem.
Here is a sample div, add this to your code base and see the output
<style type="text/css">
.te {
display: inline-block;
border: solid #0000FF 1px;
width: 100px;
height: 100px;
}
</style>
<div style="text-align: center;">
<div class="te">
hello
</div>
<div class="te">
hello there
</div>
</div>
Demo Fiddle
You can just float them left.
css:
.block1 {
display: inline-block;
float: left;
background-color: blue;
width: 100px;
height: 100px;
}
.block2 {
display: inline-block;
float: left;
background-color: green;
width: 100px;
height: 100px;
}
html:
<div class="block1"></div>
<div class="block2"></div>
JSFiddle demo
Related
I have a box and I want to type a h2 top of that box, which floated right. I want h1 to be in the middle of the box and top of that (I mean center of outside of the box).
Thanks!
Html
<h1>News</h1>
<div class="box"></div>
CSS
.box {
width: 400px;
height: 200px;
background-color: red;
}
Hope this was what you asked for:
Next time look at How to ask before asking a question on Stackoverflow, to make a good question that developers understand. You should also google before asking and see if you could solve your problem by yourself first. If you google float you get this as the first hit and get an example how to use it: CSS Float property
.box {
width: 400px;
height: 200px;
background-color: red;
}
.txt-box > .box{
display: block;
}
.txt-box {
display: inline-block;
text-align: center;
}
h1 {
margin: 0;
}
h2 {
float: right;
}
<div class="txt-box" >
<h1>News</h1>
<div class="box">
<h2>Box text</h2>
</div>
</div>
your question didn't full go into detail of the problem you were facing, but here is a way of approaching this specific H1 tag.
html:
<h1 class ="news-h1">News</h1>
<div class="box"></div>
css:
.box {width: 400px; height: 200px; background-color: red;}
.news-h1 {float:right;}
Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?
I've been banging my head for days over this and tried everything I could possibly think of.
This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-cell;
}
.col-left, .col-right {
float: left;
width: 50%;
height: 100%;
}
/*--this should be vertically centred--*/
.content {
}
HTML
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>SOME TEXT</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="SOME IMAGE URL">
</div>
</div>
</div>
</section>
JSFiddle
.row {
...
display:table-row;
}
.col-left, .col-right {
...
display: table-cell;
vertical-align: middle;
}
Demo
You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-row;
}
.col-left, .col-right {
display:table-cell;
width: 50%;
height: 100%;
vertical-align:middle;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
you can try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table;
}
.col-left, .col-right {
float: left;
display:table;
vertical-align:middle;
width: 50%;
height: 100%;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
display:table-cell;
vertical-align:middle;
height:100%;
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.
I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.
One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.
A simple structure like this is all you need:
.container {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.
I thought this articles on the subject were interesting:
Give Floats the Flick in CSS Layouts
Farewell Floats: The Future of CSS Layout
I have a square <div> (70px x 70px) which will contain an image of a variable dimensions(Square, landscape or potrait). I want this image to be symmetrically centered inside the <div>. how do I get it..?
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
The actual size of the image can be greater than 70px x 70px. But it should fit symmetrically in the center.
I also have to make it cross-browser compatible..
Help Appreciated...
Must it be an <img> element?
You can set the image as background of the <div> with background-position:center center - this is very easy to do, not using javascript and cross-browser..
Use it like this:
<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>
Check this Working jsFiddle. In terms of browser support I've never come across a browser that doesn't support this.
It is sure to work on:
Netscape 6+
Mozilla 1+
Firefox 1+
Internet Explorer 4+
Opera 3+
Safari 1+
This will do the trick for u
.img-polaroid img{display:block; margin:0 auto;}
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
should be
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black;display:table-cell;vertical-align:middle;text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
add display:table-cell;vertical-align:middle;
Use display: table-cell; for your div with your text-align: center; and vertical-align: middle;
Below is the code:
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; border: 1px solid yellow; text-align:center; vertical-align: middle; display: table-cell;">
<image src="http://www.gelifesciences.com/gehcls_images/GELS/Link%20Images/Product%20Link%20Images/ImageScanner%20III%2050x50.jpg" />
</div>
and here is the example: http://jsfiddle.net/eUGb6/
Here you can find more about compatibility issues:
vertical-align text-align display
It's very simple to do it vertically/horizontally alignment.
First build a holder div:
.holder {
display: table;
}
Then build a container div:
.container {
display: table-cell;
vertical-align: middle;
text-align: center
}
And in your container, it would be shown everything centered.
I didn't test it yet.. but should work ;p
<div class="holder">
<div class="container">
<img src="YOURIMAGE" />
</div>
</div>
Its easy :)
.img-polaroid {
display:table-cell;
vertical-align: middle
}
check fiddle http://jsfiddle.net/9hppL/2/
You can use the display:inline-block and :after for div, like this:
div {
width: 70px;
height: 70px;
text-align: center;
border: 1px solid green;
}
div:after {
content:"";
display: inline-block;
width:0;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
Please view the demo.Click here, you can look at other solutions.
This is your ultimate guide to centering things in CSS> http://www.w3.org/Style/Examples/007/center
Here is a working jsfiddle: http://jsfiddle.net/9hppL/
.img-polaroid {
display: table-cell;
vertical-align: middle
}
#image {
background: blue;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
Please take a look at this jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/#base
I would like <div class="client"> to "inherit" <div class="contact">'s height (Both inner div's to have the same size)
Keep in mind that the content on both <div class="client"> or <div class="contact"> will dynamically change. So, there's no way to know a predefined height. HOWEVER, <div class="client"> will always have 2 or 3 lines.
HTML
<div id="conteiner">
<div class="client">Name: <br/>Phone:<br/>Emergency</div>
<div class="contact">
Contact 1<br/>
Contact 2<br/>
Contact 3<br/>
Contact 4<br/>
Contact 5<br/>
Contact 6<br/>
Contact 7<br/>
Contact 8<br/>
</div>
</div>
CSS
#conteiner {position: relative;}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
=== EDIT (07/12/2012) ===
Final jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/
Thank you #christofer-vilander !!!
Just this once, I'd recommend using <table> as you are in fact making a table. :)
How about using display: table; and display: table-cell; and make them behave like table elements?
Something like this - demo
If I am not wrong, then you want client div and contact div height should be same one.
Please use below code for the same :-
$(document).ready(function(){
$('.client').height($('.contact').height());
});
Please check and let me know in case of any help or concern.
Regards,
Durgaprasad
height:100%; only works when the parent element has a set height. You can do something like this: http://jsfiddle.net/TpWNY/2/
#conteiner {
position: relative;
height:200px; // set height of container.
}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
overflow:auto; // allow the div to scroll if necessary.
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>