I have two float:left elements next to each other. When the parent element is too narrow to fit both texts on one line, then I want the text to go down to the next row, but each in their own "column". The parent width is flexible so I do not know what it will be.
http://jsfiddle.net/jsHCJ/1/ illustrates the problem and what I would like the solution to look like.
<div id = "page2">
<div class = "f1">
float 1
</div>
<div class = "f2">
float 2 and long
</div>
</div>
#page2 {width:110px; }
.f1{
background:pink;
float:left;
}
.f2{
background:yellow;
float:left;
}
Simple. Use display:table-cell; for both the divs.
What this will do is when the page shrinks or expands, the div will be at the same place and shall take the text to expand or shrink accordingly.
if i was you, i will use
display: table-cell
I've updated your fiddle
http://jsfiddle.net/jsHCJ/2/
You can change the css for #page 2 to like this
#page2 {
display: inline-block;
width: 150px;
}
try to add css in #page2
display: inline;
this will solve your problum
Related
What is the best way to wrap text where the indentation is set by the word before it, so that any wrapped text will continue with the same indentation. Like this:
http://i.imgur.com/61rVCQk.png
I made a JSfiddle to work with as well - http://jsfiddle.net/dangoodspeed/DbYFb/1/
.left { float:left; font-weight:bold; margin-right:.5em; }
I know I can do it with a table for each line, but there has to be a better way.
This seems to produce exactly the effect you need, according to your screenshot. You said you didn't want tables. Those aren't exactly tables, just divs that behave like table cells :)
http://jsfiddle.net/DbYFb/18/
Rows are wrapped in a div that behaves normally, while both columns are given display: table-cell to get the effect you want. Whether this is a better way than using an actual table is up to you.
<div class="row">
<div class="left">Name:</div>
<div class="right">John Doe</div>
</div>
.row div {
display: table-cell;
}
if you float element, give them a width and add overflow:hidden to element aside in the flow, you get it :
http://jsfiddle.net/DbYFb/3/
.left {
float:left;
font-weight:bold;
margin-right:.5em;
width:5em;
}
.right {overflow:hidden;}
see http://css-tricks.com/all-about-floats/ for more about floatting elements :)
I cannot work out why the div class pic-container won't align to the top of the page with the other 3.
Each of the child divs have a width of 25%.
I have a feeling I've missed something obvious..
Example here:
http://tinkerbin.com/NS7vagaq
Set
.pic-container{
font-size:0;
}
to display: inline;
So it is:
.pic-container{
font-size:0;
display:inline;
}
Since you have changed the structure of your code so the above no longer works try this instead:
<div class="pic_container">
<img src="images/1.jpg">
<span class="viewer">
<img src="images/2.jpg">
<img src="images/3.jpg">
</span>
<img src="images/4.jpg">
</div>
No special CSS needed.
In your example, you have the fourth identicon in a DIV separate from the other three. Since DIVs are block-level elements, the identicon in the second "pic-container" div will appear below the others.
If you move the fourth identicon also into the same div container as the first three, they line up.
Because divs are block level elements. Change it to inline and voila.
div {
display:inline;
}
http://tinkerbin.com/rz9WlaIg
Change the CSS to:
.pic-container{
font-size:0;
display: inline;
}
Fiddle: http://tinkerbin.com/DH6nLkQO
You could also float it.
.pic-container img { margin:0; padding: 0; float:left; }
Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
I was hoping I wasn't a beginner with css, but I can't understand why the following happens...
You can see an example here
I wish to display 2 separated div on the same "line" :
First div must 100% width to the second
Second div at the extrem right of the first
So, I've done the following
// CSS
.div2 {
background:#EDEDED;
float:right;
}
.div1 {
background:#CCC;
}
.div1, .div2 {
padding:4px;
margin:4px;
}
.round {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>
But the .div2 is inside the first div...
How to display something like following ? (Like I thought it should be displayed...)
Any help appreciated...
EDIT : SOLUTION
By user570783
.div1 {overflow:hidden;}
Work like a charm, but not really documented, why this works ?
float does what is says. float. as in stuff can be underneath it. Text will be wrapped, but borders won't
if you know the width of "Test 2", you can add a "margin-right: x;"
OK, there are many solutions here involving, floats, inline-block, margins and borders but all require knowledge of at least one element's size.
However!
There's a trick you can do here. If you add 'overflow:hidden' to the first div it will force the div to 'block formatting context'
This will get the result you're after, with dynamic sized right floating element.
To make this work in IE5 and 6 you need to trigger 'hasLayout' on the first element, so position: relative;
fiddle
I have this div in my code:
<div id="advice" class="validation-advice" style="">some text here</div>
Now, can I use a selector or something to say that all divs with the class validation-advice should only have a width of lets say 100px?
I tried:
div.validation-advice{
width:100px;
}
Strange thing is, the div width changes (I used Firebug to see) but the text inside the div does not wrap when the div ends. Whats missing?
Thanks!
div.validation-advice{
width:100px;
}
The problem that your text not wraps at the end of the div is because you just enter plain text. If you do it like this you have no problems:
<div class="validation-advice">
<p>Your text here</p>
</div>
It's a piece of cake!
.validation-advice {
width: 100px;
}
probably your divs have display:inline, try this:
div.validation-advice{
display: block;
width:100px;
}