I have a simple row listing certain funding opportunities. I'm confused to a behaviour that is occurring with the CSS/HTML code where there will be a gap between entries on the list if I don't use separate classes.
For example, the below picture indicates what happens when I use:
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 1</div>
<div class="label-date">Sep. 16, 2012</div>
</div>
<div class="listSeparator"></div>
<div class="row">
<div class="label">Funding Opportunity 2</div>
<div class="label-date">Dec. 2, 2012</div>
</div>
</div>
However if I close each "panel-inside" class then the result is different.
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 1</div>
<div class="label-date">Sep. 16, 2012</div>
</div>
</div>
<div class="listSeparator"></div>
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 2</div>
<div class="label-date">Dec. 2, 2012</div>
</div>
</div>
I need the formatting to be like the second picture, but I don't understand why I have to close each "panel-inside" class. Shouldn't that div be the 'container' for rows? I think the reason the gap is there is because the second row starts where the text from the one before it left off, but I have no idea how to fix this. I've included the CSS code below with border colour outlining to help differentiate the elements. Thanks for any help!
.panel-inside {
border: 3px dotted purple;
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: white;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
border-radius:7px;
}
.row
{
height: 40px;
width:100%;
vertical-align:middle;
}
.label
{
border: 1px dotted blue;
font-family: BBAlpha Sans;
font-size: 15pt;
display:inline;
float:left;
line-height:40px;
margin-left:5px;
}
.label-date
{
border: 1px dotted black;
font-family: BBAlpha Sans;
font-size: 12pt;
color:#686868;
display:inline;
float:right;
line-height:40px;
margin-right:7px;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
Try modifying the listSeparator class like so:
.listSeparator
{
border-bottom: solid 1px Silver;
clear:both;
}
This happens because you don't clearfix the .row class properly, but the outside extra div serves as a partial resetter.
Seriously - when you have tabular data and a tabular structure - use tables... far more robust and crossbrowser compatible.
Optionally - add overflow:auto; to your .row OR clear:both;to .listSeparator, this should solve the issue.
edit: you can omit the height when using overflow and also omit the .listSeparator (by adding the border to .row).
Here is the solution without closing class="panel-inside" class for every row.
HTML is similar as first condition but one difference -
<div class="listSeparator"> </div>
Css:
.listSeparator { border-bottom: solid 1px Silver; clear:both;}
Clear allows floated elements occuring earlier in the document to float along its sides.
So by using clear:both means that your div will shifted in the end of other floating elements beside your div.
http://www.free-scripts.net/html_tutorial/css/properties/classify/clear.htm
http://www.positioniseverything.net/easyclearing.html
Related
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I am having trouble getting :last-child to work in my situation.
HTML:
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="action">Some other content</div>
CSS:
div.topic {
border-bottom: 1px solid black;
}
div.topic:last-child {
border-bottom: none;
}
JSFiddle
The last div.test still has the border at the bottom.
The problem I think is that the border-bottom: none applies to the very last div which is div.action and not to the last div of class test.
How can I solve it?
You will have to update your markup in order to achieve desired result. Wrap your unknown items in a wrapper, eg:
Working DEMO
<div id="list">
<div class="topic">Some content</div>
<div class="topic">Some content</div>
<div class="topic">Some content</div>
</div>
<div class="action">Some other content</div>
then use this CSS:
#list .topic {
border-bottom: 1px solid black;
}
#list .topic:last-child {
border-bottom: none;
}
I'd suggest using first-child, not last-child.
div.topic {
border-top: 1px solid black;
}
div.topic:first-child {
border-bottom: none;
}
This works with your current HTML, and is more cross-browser compatible.
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.
I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?
If the height of your divs is variable then I would recommend either using clear:both on the first element of each new row OR putting each row in its own container div. Otherwise, as you've noticed, the divs under the selected one will probably be pushed to the side of the higher div instead of shifting down.
I'd also consider Matt's solution as divs moving around on mouseover imho gives a very chaotic look to a page.
But if you're set on doing it this way, check out this example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#gallery .image p').hide();
$('#gallery .image').hover(
function() { $(this).find('p').show() },
function() { $(this).find('p').hide() }
);
});
</script>
<style>
#gallery {
width: 800px;
}
#gallery .image {
width: 200px;
float: left;
background: #eee;
margin-bottom: 10px;
}
#gallery .image.newline {
clear: both;
}
#gallery .image .placeholder {
width: 180px;
height: 200px;
margin: 10px;
background: #ccf;
}
#gallery .image p {
margin: 10px;
background: #fcc;
}
</style>
</head>
<body>
<div id="gallery">
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<!-- NOTE the added "newline" class where the new line starts! -->
<div class="image newline">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
</div>
</body>
</html>
The w3schools has a sample image gallery all in CSS. They add a border on hover of the image.
I would maybe set the width and height of the paragraph, and fix it using absolute positioning relative to the enclosing uPic div. That way you can have the paragraph of description appear "above" the image on hover without disturbing the flow. So, add position: relative; to the uPic, add something along the lines of position: absolute; left: 0px; top: 0px; to the <p>, and then adjust other things to suit.
I suggest that you choose a fixed height and width for your div :
It may fix your problem
It is not convenient for the user when a whole part of the grid is moving just to show up a little description, whether it is downward or to the right
I think this may be helpful
<style type="text/css" ><!--
#gallery_box{
width:728px;
height:545px;
border:solid #cccccc 1px;
margin:20px auto 0px;
padding:5px;
-moz-box-shadow:0px 18px 40px #ccc;
-webkit-box-shadow:0px 14px 40px
#ccc;
box-shadow:0px 5px 30px #ccc;
}
#thumbnail{
width:160px;
height:160px;
background:#f6f6f6;
border:solid #cccccc 1px;
border:solid #cccccc 1px;
margin:5px;
padding:5px;
float:left;
text-align:center;
position: relative;
line-height: 156px;
-moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {
border:none;
-moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }
a{
color:#0066FF; text-decoration:none;
} a:hover{
color:#0099FF; }
--></style><pre>
<div id="gallery_box" >
<div id="thumbnail">
<a href="" ></a>
</div>
</div>
Here is my code:
<style type="text/css">
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
span.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
</style>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>
Div's look fine but they places vertically. Is there any way to place them horizontally in one line?
Span's place in the one line, but the span can not have the width as any inline element.
If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.
xandy is correct, but this is better:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
</div>
with CSS:
.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
.pageHolder{
overflow: auto;
width: 100%;
}
Elements to clear floats is markup. It's like using <br> but for floats. Mixing markup and content is considered bad practice in semantic web.
Read this article for more information.
Use
display:inline-block
in the div's style
Lorenzo's answer is correct, but I would add something to the markup:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
<div class='pageHolder-footer'></div>
</div>
in CSS, add:
div.pageHolder-footer{
clear: left;
height: 0;
}
So that the rest of your stuff will flow correctly.
==Alternative method (From Jan, and SitePoint) ==
No need to have the div.pageHolder-footer (but keep pageHolder). And then:
div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */
They both may have drawbacks, but it depends on what you need.
use display:inline; and your div's will be in one line.
other solution : float:left;
Use this
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
Use display: table-cell; It will solve your issue of div alignment in horizontal order.
<div class="content">
<div> Page1</div>
<div>Page 2</div>
<div>Page 3</div>
</div>
CSS
.content > div{
display: table-cell;
}
You can try out with the combination of ul/li with list-style ( css property ) as none.
some thing like
<ul> <li> <div ....</li> <li><div...></li></ul>
or
you can try within table / tds inside divs.