I have 2 div blocks that programmatically follow one after the other. by default they have is the width of 900px. In order to accommodate them to the width of the text, I put the
float: left;
or
display: inline-block;
div gets the width of the size of the text, but the lower div slides over the top lining up in a row.
PS I have a question-and-answer page, a question - one div, another answer.
http://i.imgur.com/cGb8cFg.png
just add this to html
<div style="display:block">
<div id="ques">Question</div>
<div id="answer">Answer</div>
</div>
and this is a css
#ques{ border:1px solid #000; height:80px;width:200px; margin-bottom:20px}
#answer{border:1px solid #000; height:80px; width:200px}
or see ur example here
Related
Suppose the html code is
<div style="margin-left:10px;float: left; height:90px; width:0.5px;background-color:black;"></div>
<div style="float: left; height:90px; width:0.5px;background-color:black;margin-left:20px;"></div>
I only see one div with width 0.5px.
But If I change the width of second div to 1px then both are visible.
Could someone give me an explanation about what is happening here.
I have a table that needs to be transformed into CSS-based layout, because of responsive-design requirements:
<table>
<tr><td>minimal width</td><td width="100%">maximum width</td></tr>
</table>
Is it possible to create two div s that replace the two td s in the above example?
Unfortunately, the answers to this question is not appropriate, because the first answer uses a fixed width for the left column and the in the second answer any 100% width-element on the right side causes the right div to slide under the left one. I need the same behavior as the table: Use the maximum available width, keep on the right side and use horizontal scrolling if not enough space is available.
Is it possible to do?
Sure, like this:
div {
display:table-cell;
border:1px solid #999;
}
#b {
width:100%;
}
<div id="a">
a
</div>
<div id="b">
b
</div>
Try this code in your window for your own results. When I run this in snippets, it functions correctly.
The div id=one has a fixed 100px width. The max-width for div id=two is decided in the jQuery in which it gets the width of the window you currently are using, and it subtracts the amount of the fixed width of the div id=one.
The div that encompasses them all has a flex display to erase the blank space that generally shows up between divs, which adds pixels and would make the 100% - 100px width still appear on the line below because it would be too big.
$("#two").css("max-width", ($(window).width() - 100) + "px");
#one {
display:inline-block;
width: 100px;
border: 2px solid black;
}
#two {
display:inline-block;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:flex">
<div id="one">stuff</div><div id="two">more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff</div>
</div>
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side