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 :)
Related
I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!
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
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 need a two column table with one word in the left column (e.g. name, biography) and with details for each in the right column. I have tried:
<div id="container">
<div id="left_column">......</div>
<div id="right_column">......</div>
</div>
This looks fine if the right column only has one or two words, but for longer entries such as 'bio' the second div's info snakes underneath the left_column div.
What's the easiest way to achieve the two columns without this happening?
You need to float them, and set some widths.
#container {
width:100%;
}
#left_column {
float:left;
width:20%;
}
#right_column {
float:left;
width:80%;
}
Note: If you only float them, and don't set widths, they'll still snake under each other when the browser window gets narrow.
Use the CSS property to make it a floating element and display:inline-block doesn't work on all browsers.
float:left;
You could also you <span> which by default won't wrap.
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me