I'm trying to centering my paragraph with table, table-cell and vertical-align. For some reason, it doesn't work. Check my code please.
html
<div class="a">
<img src="http://dummyimage.com/600x400/000/fff" alt="">
<div class="b">
<p>sdfsdfsdfsdfsdfs</p>
</div>
</div>
css
.a {
display: block;
float: left;
height: 100%;
min-height: 1px;
width: 334px;
background: red;
}
.a > * {
float: left;
}
Edited Fiddle http://jsfiddle.net/k73xfayx/ here
The outer element has to have display: table, the inner ones table-cell
I put another DIV around your img (class c) to get that structure: One surrounding DIV (a), two DIVs inside that (c and b), one of them containing the img, one a p-Tag with text.
Your code does not seem to include any <table> tag at all.
I am sorry if I have misinterpreted your question.
If you have changed it, then could you please edit your question and post your code's previous version in it.
This will help people having a similar question.
This is what I currently see:
<div class="a">
<img src="http://dummyimage.com/600x400/000/fff" alt="">
<div class="b">
<p>sdfsdfsdfsdfsdfs</p>
</div>
</div>
Styling:
.a {
display: block;
float: left;
height: 100%;
min-height: 1px;
width: 334px;
background: red;
}
.a > * {
float: left;
}
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;}
I have this html code-
.boxes{
float: left;
}
.box_1{
background-color: orange;
height: 100px;
width: 100px;
}
.box_2{
background-color: blue;
height: 100px;
width: 100px;
}
.box_3{
background-color: green;
height: 100px;
width: 100px;
}
<div class="boxes">
<div class="box_1">
</div>
<div class="box_2">
</div>
<div class="box_3">
</div>
</div>
Why isn't the output like this-
Why I have to add float property to each of the boxes, i.e.,box_1,box_2,box_3 to get the desired output? Thanks for your help!
You are floating the container and should float every single box, to do this you can use the direct descendant of selector (>) in css
or you can try this:
.boxes > div{
float: left;
}
The reason it doesn't show up that way is only the container .boxes is being floated. The float property isn't inherited into child elements.
So the container is floated and the children being "block" elements cause each other to wrap to the next line.
You can fix it by adding a float: left to all of the children (won't show this as other answers have already), or if you only want the parent floated adding display: inline-block to all of the children. The difference being, if you want the content of .boxes to be treated with normal "document flow" rules you don't want them to be floated.
A More Lengthy Explanation
The reason you need to float or change display to inline-block is that doing either will change the <div>s from having a block display to something else. float does so automatically, setting display: inline-block does so explicitly. This will tell the browser to treat the blocks like an inline or word, allowing them to be placed next to one another.
So even though you're floating your container, since the children still are being displayed as block elements they cause each other to break lines and display vertically.
.boxes{
float: left;
}
.boxes > div{
display: inline-block;
}
.box_1{
background-color: orange;
height: 100px;
width: 100px;
}
.box_2{
background-color: blue;
height: 100px;
width: 100px;
}
.box_3{
background-color: green;
height: 100px;
width: 100px;
}
<div class="boxes">
<div class="box_1">
</div><div class="box_2">
</div><div class="box_3">
</div>
</div>
As I said in my comment:
"You're floating the container, not the boxes"
Remove:
.boxes{
float: left;
}
Add:
.boxes > div{
float: left;
}
http://jsfiddle.net/dxuxwpmb/
Change your html layout to the following:
<body>
<div class="boxes box_1">
</div>
<div class="boxes box_2">
</div>
<div class="boxes box_3">
</div>
</body>
OR you can change your CSS to:
.boxes div{
float: left;
}
The issue is that you were trying to float the container and not the dividers within the container.
I have a simple html code with div tags
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div >Shouldn't this be on a new line?</div>
and the classes are defined in a style sheet as
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline
}
The problem i am having is that there seems to be a super-imposition where any div tag that comes after ignores the existence of the former tags whenever there is an align element involved. Please see http://jsfiddle.net/tea0phnr/2/ for what i am talking about.
CSS
.clear {clear:both;}
HTML
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="clear"></div>
<div >Shouldn't this be on a new line?</div>
http://jsfiddle.net/tea0phnr/3/
Your floating divs are being pulled out of flow - causing the last div to resume their place in the actual flow. You'd either need to clear:both; the last div, or perhaps with a pseudo element. ( div:last-child:after )
div:last-child {
clear: both;
}
http://jsfiddle.net/hzdcu1xw/
or have it float + width: 100%; as well.
div:last-child {
float: left;
width: 100%;
}
http://jsfiddle.net/efapLo2d/ in order for it to layout accordingly.
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
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;
}