I have the following layout: fiddle.
<div>
<div class="left">
<div>label not aligned</div>
</div>
<div class="right">
<div><textarea></textarea></div>
</div>
</div>
<div>
<div class="left">
<div>label aligned</div>
</div>
<div class="right">
<div><input></input></div>
</div>
</div>
/*...css in the fiddle*/
In it you can see that there are 2 rows, one with a textarea and the other with an input for comparison. As you can see the first row's label is pushed down even if the line-height and height are the same as in the right column. In the 2nd row with the input you can see the behavior I was expecting where the label is essentially centered and in alignment with the input to the right. This occurs even if the textarea has resize none.
Does anyone know why this is happening? I know how to get it to work using float left but I wanted to know if there's a cleaner solution. Thanks in advance.
Add a vertical-align: top to your .left class like below:
.left{
border: 1px solid black;
vertical-align: top;
}
Updated Fiddle
Related
Running into a lot of problems here:
.apple {
height: 100px;
width: 100px;
border: 1px;
border-top-style: solid;
border-top-color: red;
background-color: blue;
text-align: justify;
}
for the entire code, please visit:
https://jsfiddle.net/jennielisajane/4sb8upa6/#&togetherjs=pabeHPuntm
(I would appreciate if you could collaborate directly on jsfiddle)
Hi, I want these boxes to be spaced equally vertically. Right now it isn't spaced.
Also I set the width and height of each box and somehow only the third box respects width and height in css. Why is this happening?
Also how do you center texts horizontally for first and second boxes?
I also want to center the text in the third box vertically.
Thank you in advance.
Provided in the link above
https://jsfiddle.net/jennielisajane/4sb8upa6/#&togetherjs=pabeHPuntm
You forgot to close the div tags with classes apple, bee and orange.
Should be:
<div class="gen">
<div class="apple">
<div>apple</div>
</div>
<div class="bee">
<div>bee</div>
</div>
<div class="orange">
<div>orange</div>
</div>
</div>
Instead of:
<div class="gen">
<div class="apple"> <div>apple</div>
<div class="bee"> <div>bee</div>
<div class="orange"> <div>orange</div>
</div>
I have this jsfiddle: Sample
As you can see 2 divs are align together side by side, what I want is to vertically aligning them. Also I want to be able to add another div to float to the right which is also vertical aligned.
How can I able to aligned them without using absolute positioning?
<div style="background-color: blue; ">
<!-- Global Header -->
<div class="header">
<div class="floatLeft">
WritePub
</div>
<div id="pcontainer" class="inner-header-search floatLeft">
<input type="text"/>
</div>
</div>
</div>
Your fiddle is too noisy. If you want to vertical align the contents of a div without touching its height you can add "display: table-cell" to the div to simulate a table row column which gives you alignment.
http://jsfiddle.net/5peh12th/2/
<div class="container">
Hello: <input type="text-box"/>
</div>
.container {
display: table-cell;
width: 800px;
background-color: red;
height: 50px;
vertical-align: middle;
}
or you can just not give the div a height and give top and bottom padding of equal numbers
I have been trying out with div overflows. And I am encountering the problem that the div is not displaying 'normally'. This is a simple HTML and CSS and I hope someone can explain me the problem?
I was expecting that the boxes to be displaying in the same line.
<div class='content'>
<div class='box'>
hihi
</div>
<div class='box'>
</div>
</div>
...
http://codepen.io/ycmjason/pen/xbXpmV/
You are missing vertical-align: top; property on box class.
It should be:
.box{
display:inline-block;
**vertical-align: top;**
width:50px;
height:50px;
margin-left:15px;
background: #55CC55;
}
The default vertical align value for a div is baseline, this means, the box moves to the bottom as soon as you write text in it. If there's no text, there is no baseline to be aligned to, so they just hop on the top. To fix it add vertical-align: top; to your .box.
I have 2 DIV's that I want to be side-by-side under all circumstances. So far I am accomplishing it like this:
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right; overflow: scroll; width: 1000px">
<pre> ... </pre>
</div>
However, I don't like that I have to specify an absolute width in the 2nd div.
I just want the 1st div to be the minimum width to display the table and 2nd div to take up the rest of the space without overflowing.
Is there a better way?
One way i've found quite versatile is to only float one of the divs. Float the left one and put that much padding on the right div. Here's an example of what i mean: http://jsfiddle.net/a6Bv8/ - i put one with an inner wrapper for borders or padding requirements to make it fluid, as well as the three column example..
#left { width:50%; float:left; }
#right { padding-left:50%; }
<div id="container">
<div id="left">
left left left
</div>
<div id="right">
right right right
</div>
</div>
This is nice, too, to do three columns. You can float the first div to the left and give it it's width ( say 200px ), float the right column to the right and set its width (say 200px ) and set the padding on the third div to padding-left:200px;padding-right:200px (or 210 if you want a gap ).
If you don't mind ignoring ie6&7, this will work nicely:
<div style="white-space:nowrap;">
<div style="display:inline-block;">
blah
</div>
<div style="display:inline-block;">
blah
</div>
<div style="clear:both;"></div>
</div>
There might be some ie hack that will make this work in that browser, check:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
When you say "rest of the space" what do you mean. If your table was suddenly 3000px, what should happen?
I think a solution might be to wrap them in a third div:
<div style="width: 1500px;">
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right;">
<pre> ... </pre>
</div>
<div style="clear:both;"></div>
</div>
EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc
First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg
Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):
<div class="left">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="right">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="clear"></div>
<div class="box">
//
// NOW THIS BOX HAS NO TOP MARGIN
//
</div>
<div class="box">
// box content
</div>
And CSS styles go like this:
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.box {
overflow: auto;
margin-top: 10px;
}
Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.
Any idea where could be the problem?
See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.
I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.
We've tested this, and only IE8 gets it wrong:
http://www.inventpartners.com/content/ie8_margin_top_bug
We also came up with 3 solutions.
Try closing your clear div.
<div class="clear"></div>
I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.
enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.
<div id="container">
<div class="left">
<div class="box"> // box content </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
<div class="right">
<div class="box"> // box content right </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
</div>
<div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div>
<div class="box"> // box content</div>
And the CSS
#container { width: 100%; overflow: hidden; }
(sorry, I left IE7 on my work machine for testing so I can't verify)
I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.
The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.
I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.