<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
<div class="cl"></div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
<div class="cl"></div>
</div>
Is it possible to avoid adding <div class="cl"></div> at the end of each .block?
There are two common solutions to this problem.
Add overflow: hidden to the parent of the floated elements (so in this case, .block).
Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/
Some more information here: Is clearfix deprecated?
A good time to use clear: both is when you already have an element available to add it to.
For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/
you could do this:
<style>
br {clear:both;}
</style>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
a second option re: #animuson comment
<style>
.container br {clear:both;}
</style>
<div class="container">
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
</div>
You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.
Example: http://jsfiddle.net/mKazr/
CSS
.block {
clear: both;
overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
}
.left { float:left; }
HTML
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
Edit: added code
Try using overflow:hidden on the .block I know that that sometimes will fix it.
Related
Can I apply the first-child and last-child pseudo elements to the divs with the same class that are in different sub-containers? In the example below, div with the classes "box selected" are all stored under "1st-container", but there are 2 additional containers on the way:
<div class="1st-container">
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have first-child pseudo elements
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected">
<div class="box">
<div class="box">
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have last-child pseudo
<div class="box">
</div>
</div>
</div>
Is that doable with pure css?
You can't do what you've described, because in both cases, "box selected" is the first child of its parent. You could take a different approach, though. For example, you could target those two divs like so:
.2nd-container:first-child .selected,
.2nd-container:last-child .selected
{}
As pointed out, replace the 2 with a non-digit, as that won't work. I was distracted by the main question. :-)
Firstly, you cannot use numbers to start classes or id's.
Secondly, you just need to do a find on the first and last child of the second element in and you should be able to find the elements you need.
.box {
height: 20px;
width: 400px;
background: blue;
}
.box.selected {
background: red;
}
.two-container:first-child .box.selected,
.two-container:last-child .box.selected {
background: green;
}
<div class="one-container">
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have first-child pseudo elements</div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have last-child pseudo</div>
<div class="box"></div>
</div>
</div>
</div>
with JS it looks easier than CSS:
var selected = document.querySelectorAll('.one-container .box.selected');
selected[0].style.background = selected[selected.length-1].style.background='green';
FIDDLE
My HTML code:
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
Css:
.span4:nth-child(3n+1){
color: red;
}
In result there must be 1, 4, 7 red colored. But it's not.
Example: http://jsfiddle.net/473UR/
How to solve that problem?
.nth-child works with the consecutive element. If there is any other elements comes in between it starts calculating from the first.
<div class="span4">1</div> <-- this is first-child -->
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div> <-- sequence reset.
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
That's because .span12 counts as a child too. If you remove it, it will work
You need to move your banner div and it will work
EXAMPLE
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
<div class="span12">banner</div>
I have a problem with my css. I cant get the div-children of my "round"-classes to fill their parent.
http://jsfiddle.net/ubJxJ/10/
To be even more clear: I want the divs to align for a bracket-setup. F.x. "Match #17"s center is the same as the center of "Match #1" and "Match #2".
CSS:
#cup { display:table; }
#headlinecontainer, #roundcontainer { display:table-row; }
#headlinecontainer div {
display:table-cell;
text-align:center;
}
#roundcontainer .round {
display:table-cell;
vertical-align:middle;
background-color:#F00;
overflow:hidden;
}
#roundcontainer .round div.match { background-color:#0F0; }
HTML:
<div id="cup">
<div id="headlinecontainer">
<div>Round of 32</div>
<div>Round of 16</div>
<div>Quarter</div>
<div>Semi</div>
<div>Final</div>
</div>
<div id="roundcontainer">
<div class="round ro32">
<div class="match">Match #1</div>
<div class="match">Match #2</div>
...
<div class="match">Match #15</div>
<div class="match">Match #16</div>
</div>
<div class="round ro16">
<div class="match">Match #17</div>
...
<div class="match">Match #24</div>
</div>
<div class="round quarter">
<div class="match">Match #25</div>
<div class="match">Match #26</div>
<div class="match">Match #27</div>
<div class="match">Match #28</div>
</div>
<div class="round semi">
<div class="match">Match #29</div>
<div class="match">Match #30</div>
</div>
<div class="round">
<div class="match">Match #31</div>
</div>
</div>
</div>
Thanks in advance
I think I understand what you are looking for: a typical bracket setup.
However, it seems you have already achieved that!
Look at my screenshot of your jfiddle:
What browser are you using? How does it look for you? (I am using Chrome).
I have created 3 different sets of columns, but I want the ability to style each column differently.
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
this is my current code: http://jsfiddle.net/TroyAlford/Cj6dj/2/
I want to style the featured work and news columns with top and bottom boarders and to style the type. The two Info columns along with the middle and Right columns would have full boarder around it.
Would I rename each class to a unique name to achieve this effect?
You can you the :first-child selector - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
Here is what I have:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
It's rendered in my Chrome 15.0.874.106 m as:
Name:
Address:
test1
test2
where I expected it to be:
Name: test1
Address: test2
Could you please help me ?
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
I've pasted the code in here, but I've also created a jsfiddle link.
Here's the html:
<div class="table">
<div class="column first">Name:</div>
<div class="column">test1</div>
<div class="column first">Address:</div>
<div class="column">test2</div>
</div>
And the styles:
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
Hope that helps...
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Name:</div>
<div style="display: table-cell;">test1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Address:</div>
<div style="display: table-cell;">test2</div>
</div>
</div>
</body>
CSS3 has just the ticket:
.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div></div>
<div class="row">
<div class="cell"> CELL four
</div><div class="cell"> CELL five</div>
<div class="cell">
<div class="tabl">
<div class="row">
<div class="cell">CELL 6A</div>
<div class="cell">CELL6B</div>
</div>
</div>
</div>
</div>
</div>
That can then be allied to a structure that looks like a table In this case I've included a nested table:
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
<div style="display: block; ">
<div style="float:left">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
<div style="clear:both"></div>
</div>
your solution is as follow :-
PLease check it
<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
}
</style>
<!doctypehtml>
<html>
<body>
<div class="Row">
<div class="Cell">
<p>Name:</p>
</div>
<div class="Cell">
<p>Test1</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Address:</p>
</div>
<div class="Cell">
<p>Test2</p>
</div>
</div>
</body>
</html>
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
Or if your purpose is different and still wanna go with div? Try this..
use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
Corrected code:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="float:left; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left;">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Moe's way is pretty cool but it's not standard.
This is the best way.
Use CSS command "float" just like this:
HTML Code:
.gwt-Label
{
float: left;
width: 50%
}
<!doctype html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Or you can have it all in one place:
<!doctype html>
<html>
<head>
<style type="text/css">
.gwt-Label{
float: left;
width: 50%
}
</style>
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>