I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Use display: inline-block; on <span>.
Like:
span {
display: inline-block;
}
Have a look at the snippet below:
span {
display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Hope this helps!
Here's a better version, with the actual boxes next to eachother, instead of inside eachother and moved via margins.
<div id="one-off-pricing" style="width:800px; overflow: hidden;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
</div>
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
</div>
</div>
<p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
Try this
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Try this (and see the notes and explanations below):
.one-off-pricing {
width: 800px;
}
.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}
p {
font-weight:bold;
}
<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>
1) Why put all the inline CSS in a stylesheet?
It massively helps with scaling and maintenance.
2) Why use a class for "one-off-pricing" instead of an id?
When CSS selectors start to get long and complex, ids in long chained selectors can mess things up. For this reason it's often (not always but often) better to use a class instead of an id.
3) Why use <p> instead of a <span>?
Because the element in question is best described as a paragraph.
4) Why use display:inline-block instead of a float?
Because you simply don't need floats in this situation.
Related
I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/
Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.
Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.
You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>
For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.
How can I style a group of related divs to look like a table per the attached image? Thx!
<div class="collection"
<div class="group">
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
... repeats n times
</div>
Disclaimer: This particular html output is auto-generated and I don't have control over what is generated. I just have divs to work with and I want to style accordingly.
Sorry guys, but, what the float?
while you all tried to proscribe what you think the OP needs, the answer to the question actually is
.collection {display:table}
.group {display:table-row}
.label, .value {display:table-cell}
I believe
.label {
width: 200px;
float: left;
}
(apart from the other styling) will do the thing for you.
html
<div class="collection">
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
</div>
css
.label { float:left; width:200px; border-top:1px solid #ccc; }
.value { margin-left:200px; background:#fffced; border-top:1px solid #ccc; }
Code: http://jsfiddle.net/wWGG8/1/
I would just use a table. You can read about tables in HTML here The <tr> tag defines a table row. The <td> tag defines the table data. Each <td> tag is a new column.
<table>
<tr><td>This is the table data</td><td>This is more table data in the same row</td></tr>
<tr><td>Here is another row</td><td>This is more table data in the second row</td></tr>
</table>
True, you can just use a table. That would be semantically convenient.
Nonetheless, you can stick to your current HTML structure.
Just assign the divs with classes of label and value with a width and then float them to the left.
You might also need to specify a height for the div with class group.
I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;
I'm really thinking of going back to tables because this is just #¤€&/#£ always something....
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
<div style="float: left; width: 20%">
#2 <a>BusHka</a><br />
<small>Old school</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
#1 is stupid
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
This gives:
http://i29.tinypic.com/2iawh83.png
A huge space in the first div. why? it dont if theres more than 10 comments for some reason
ignore the stupid comments
I would be careful about having width of 20% and 80% expect to fit on one line: if there is any padding or border they won't. It looks the way it should in ff 3. :D
Pasting your HTML into the body of my generic testing-HTML-code-from-Stack-Overflow file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test</title>
</head><body>
<!-- Rebadow's code here -->
</body></html>
shows no problem. Your problem must lie elsewhere, like in your CSS for instance.
if you are using IE6 using 20% with 80% with will often cause the line to overflow, i usually use 20% 79% and you should be ok
to see if it is something overflowing try adding overflow:hidden to the divs and see if they line up, if so you know its something overflowing.
have you used firebug or another inspection tool to see what the heights and widths actually are?
Try adding a wrapper div around your floating ones. This is just to see if anything above this is affecting it somehow.
<div style="clear:both">
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
Also I wouldn't make a div just to display a line, but that's another issue entirely. Maybe try a HR tag, or wrap that div around everything, this is just to make the code make more sense structurally.