I have a website I am developing.
I have this div with another div inside of it named 'second'.
I want the first div to be the same height as 'second'.
So I make the height: of the first div: height:auto; but that doesnt work, that makes it shorter then 'second'. How do I set the height of the first div to match the 'second' div?
The reason why the height needs to be the same as 'second'is because 'second' has expanding content in it.
There are some reasons the outer div doesn't span as the inner does.
.second is floated. If that's that case add <div style="clear:both"></div> just before the outer div is closed.
.second is absolutely positioned. There's no way to resolve that issue.
Try setting padding to 0 and margin to 0 as well.
You can ignore the height.
this code below worked for me.
<html>
<head>
</head>
<body>
<div style="border:1px solid #ccc;margin:0px;padding:0px;">
<div style="border:1px solid #000;height:100px;">
</div>
</div>
</body>
</html>
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I have this sample code:
<html>
<head>
</head>
<body>
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>
The contents of div 2 is placed left of the contents of div 1 (fine), but the border of div 2 contains div 1. This happen in all tested browsers (Firefox 26.0 and IE8).
Demo
Can you please explain what is going on?
Because you aren't floating another div - Demo
And since it's not floated, it will take entire horizontal space, also it won't shift down as you aren't clearing your floats.
So what happens is the floated div just sits to the left, making your non floated div wrap around it..
If you move the order of your div in the markup, you will understand what I meant - Demo So, as you see, the top div takes all the horizontal space available, whereas the other div sits on the left, won't take entire horizontal space as it's floated to the left, so since you have the floated div first and next is non floated div it will take up 100% space, but will wrap around the floating div since you haven't cleared it, so you should float the next div as well.
The same effect can be achieved using display: inline-block; as well.
For more information on how floats work, refer my answer here
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black; float: left;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)
I have this fiddle
http://jsfiddle.net/JsZ9q/5/
I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.
The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).
Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.
Try:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
Note: Span are inherently inline:
The above should behave the same as this:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
Edit: Based on fiddler
Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
See here:
http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.
Your solution:
http://jsfiddle.net/JsZ9q/9/
Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.
Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.
At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.
Float does this:
.left {
float:left;
}
.right {
float:left;
}
http://www.w3schools.com/cssref/pr_class_float.asp
Or am I missing something in your question?
If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.
use a wrapper for positioning: I Forked your Fiddle
You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/
<style type="text/css">
.wrap
{
width:100%;
}
.left
{
float:left;
}
</style>
<div class="wrap">
<div class="left">aaaa</div>
<div class="left">bbbb</div>
</div>
I have a block of html like this. Judging by the background color of the divs, the outer div is not containing the inner div, unless I remove "float:left" from the inner div, or add "float:left" to the outer div. Why is that? http://jsbin.com/ihiqoz/2/edit
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
You need to clear your float:
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
<div style="clear: left;"></div>
</div>
Floating elements break out of the layout, so your div doesn't get considered by the elements around it. The clear css property forces an element to move after the last floating element, so when you place an empty div below your floating element by giving it the clear style, the outer div will stretch to contain it.
#ray; if you have float in your child element so you have to clear it's parent so just write overflow:hidden in it's parent div to clear it.
For Example:
<div style="width:900px; background-color:#1EFF1E; overflow:hidden">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
read this article for more http://www.quirksmode.org/css/clearing.html
You can also add <BR> at the end of the div, after the floated one.
Edit: You need to clear the div.