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.
Related
I've this (apparently) simple layout :
There is a lot of technique out there, but I can't find one that will fulfill all the requirements. Could you point me to te correct direction ?
Edit : I need my layout to be 100% of it's parent, and to fall back to divs (or td's) one under this other on small screens. See my fiddle.
And I will need gutters.
table
Piece of cake, of course, thanks to rowspan and colspan. And it's easily fluid. But, can't use media query to change the display for small screens.
Edit : actually, media query works with td's. I just set it as display:block on small screens, and here we go. This is my working fiddle. But you know, "table is bad"...
float
I didn't even try. Do you think I should have ?
imbricated div's
It's not possible to imbricated this. I could use absolute positionning, but it wouldn't be fluid anymore
flexbox
Each time I try to use flexbox, it ends with a headache. But if I'm not wrong, we can't have rowspan and colspan at the same time.
css grid layout
It's the graal. Maybe it's metaphysic.
I'd say float's is the easiest way, with position:relative and top:-x% (x based on % of boxes) on the blue one.
HTML:
<div class="container">
<div class="red portrait"></div>
<div class="green landscape"></div>
<div class="yellow landscape"></div>
<div class="blue portrait"></div>
</div>
CSS:
.container {
width:300px;
height:200px;
}
.container div {
float:left;
}
.red {
background-color:#e23812;
}
.yellow {
background-color:#e2df00;
clear:both;
}
.green {
background-color:#28a837;
}
.blue {
background-color:#224395;
position:relative;
top:-20%;
}
.portrait {
width:40%;
height:60%;
}
.landscape {
width:60%;
height:40%;
}
JSFiddle demo
My two cent on this issue, using some flexbox and without float.
See my fiddle.
Here would be the step by step approach:
we create a container box that will handle our design (200px by 300px)
we use flexbox to create a 2 by 2 box (without the hole in the middle). Flexbox helps to create two rows, each divided into two columns just using flex-flow: row wrap (it will distribute divs in a row, and when it's too narrow it wraps the rest into a new line).
In our case we need to fine-tune .landscape and .portrait divs to fit desired proportions (40% and 60% width or height depending on the case). As 60% + 40% will always occupy 100% of a row, we are assured that the flex-flow property will wrap the other two divs into a new line, itself fitting 100% as well.
At this stage, the shape looks pretty good except for the blue div which is not correctly aligned with the yellow one.
we just correct above point by applying basic repositioning to the blue div
I just did it here is a fiddler link
https://jsfiddle.net/48L7btg6/5/
I separated it into two parts:
- Part 1: the red and the green figure
- Part 2: the green and the blue figure
got the Part 2 as
position:absolute;
left:150px(or whatever you want);
top:0px(just in case?);
And you're done
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'm trying to create a sort-of table of clips on my webpage. The idea is that it's basically (in my mind) a table with a thumbnail in the left column, and then a right column would house a title, where the story appeared, a date, and a description. I have no trouble doing this using HTML <table> but I'm trying very hard to get better at CSS.
I've combed this (very helpful) site and am far ahead of where I was this morning. However, I'm having trouble with setting the "height." I don't want to set a firm height. I want the "row" to adjust to the height of an image or block of text, and for the height to be the same for both "columns."
Right now I have this.
HTML:
<p class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
CSS:
.container {
width:620px;
}
.imageclass {
float:left;
width:120px;
}
.textclass {
float:left;
width:500px;
}
Have you tried applying overflow: hidden to .container?
If this is really going to be a "row", why not wrap all of the content in a div? This div will scale to be the height of its tallest child. Then if you need to manipulate the rows you can just use CSS selectors for the row class:
<div class="row">
<p style="height:200px; background: black;" class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
</div>
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 am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...