I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains 4 groups of elements that I want to be displayed side by side. Of these 4 groups, 2 of the groups need to be variable width while the other 2 are fixed. I have it mostly working except the last group isn't wrapping the way I want it to. I can't put a margin-left on it because of the variable width sibling. I also tried setting each item as inline-block but that forced the last group to have a strange calculated width that was larger than the available space and always forced it below the other 3 groups.
Here's a live example/fiddle and the source is as follows:
HMTL:
<div class="row level-2 note subtype-new subtype-fancy">
<div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div>
<div class="padded">
<div class="status-icon-wrapper col">
<span class="new-icon icon"></span>
<span class="modified-icon icon" title="Revised Code"></span>
</div>
<div class="codes-wrapper col">
<span class="codes">XYZ</span>
</div>
<div class="icon-wrapper col">
<span class="fancy-icon icon"></span>
<span class="plain-icon icon"></span>
<span class="disabled-icon icon"></span>
</div>
<div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div>
</div>
</div>
CSS:
.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000}
.col {float: left}
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:}
.level-1 .padded {padding-left: 30px}
.level-2 .padded {padding-left: 60px}
.codes-wrapper,
.icon-wrapper {padding-right: 3px}
.status-icon-wrapper,
.icon-wrapper {width: 17px}
.row .icon {display:none}
.note-icon {background-color: #F0F}
.fancy-icon {background-color: #CC0}
.plain-icon {background-color: #C00}
.new-icon {background-color: #0CC}
.note .note-icon,
.subtype-new .new-icon,
.subtype-modified .modified-icon,
.subtype-fancy .fancy-icon,
.subtype-plain .plain-icon,
.subtype-disabled .disabled-icon
{display: inline-block}
.description {
overflow:hidden;
}
jsFiddled here
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
hidden : This value indicates that the content is clipped ...
If I understand the question correctly you should add:
.description{
overflow:hidden;
}
to your CSS
Related
Please check the below link :
http://example.com/1/23.php
Here I am trying to align the span text eg Messages and photos such that it should appear in the middle wrt the icon.
Any help will be highly useful
Below is the code :
<div style="padding-left:20px">
<img src="icons/trophy1.png" > <span style="display:inline-block;padding- bottom:5px;"> Messages</span>
<br>
<img src="icons/trophy1.png" > <span style="display:inline-block;padding-bottom:5px">Photos</span>
</div>
You could achieve this by setting the icon as the background of the span and change the line-height to the height of your icon.
span.trophy {
background: url(icons/trophy1.png) no-repeat 5px 3px;
height: 32px;
text-indent: 30px;
line-height: 32px;
}
You can use a DIV element to achieve this.
You should use the CSS text-align property on the container.
<div style="text-align: center;">
<img src="icons/trophy1.png" >
<span style="display:inline-block;padding-bottom:5px;"> Messages</span>
</div>
Can't center text vertically with a link, this is my html code:
<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
<p style="">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
I've tried to specify vertical align, to p tag, also tried line-height, but no success, link still is out of position.
jsfiddle : http://jsfiddle.net/85q6wqjx/
You can realize this layout as follows.
First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.
Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.
Third, apply vertical-align: middle to the p element for it to have the
desired effect.
This approach will work with any number of text lines, as demonstrated.
See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/
.panel {
background:#F7C0B9;
width:645px;
height:170px;
margin:0 auto;
outline:1px solid #FFF;
text-align:center;
line-height: 170px;
}
.panel p {
vertical-align: middle;
display: inline-block;
border: 1px dotted gray;
line-height: 1.25;
}
<div class="panel">
<p>Text<br /> Link<br>a 3rd line for example</p>
</div>
If you want the Link under the text but still both in middle:
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;">
<p style="display:inline-block;">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
JsFiddle
Your line-height was pushing it outside the div and the p being a block element was stopping it from going under. You needed to make p an inline-block element.
If you want them both on the same line, remove <br> from the html.
JsFiddle
br is a line break and line-height effects by that.
Please remove <br> tag you will get what you want
and update your code snippet with
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
<p style="margin: 0;">Text</p>
Link
</div>
http://jsfiddle.net/85q6wqjx/10/
Just add following code to your css file
a {
margin-top: -8%;
display: block;
}
give class/id name to anchor tag if you want to add style particular anchor tag
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.
Please see this This Image for a picture of the problem.
I have a div that displays a list under a text field. It is a fake Combo-box, using a text element and JavaScript. The list that appears when someone types should cover the other form elements, but should also make the wrapper div bigger so it doesn't get cut off. I have only been able to do one or the other.
Here's The relevant HTML
<td id="EditorMainColumn">
<div id="EditorPanesWrapper">
<div style="display: block;"><!-- a Jquery Tools Tab, also the problem div -->
<div class="EditorFormFieldWrapper">
<label>My Field</label>
<input class="EditorInput" name="name">
</div>
<br class="ClearBoth"><!-- I don't know if this helps or not -->
<div class="ComboBoxListWrapper">
<div class="ComboBoxList">
<!-- <a> elements are inserted dynamically here -->
<br class="ClearBoth"><!-- I don't know if this helps or not -->
</div>
</div>
<div><!-- Cover me! -->
You can't see this when the combo box is open...
</div>
</div><!-- END display:block div -->
</div><!-- END EditorPanesWrapper -->
</td>
CSS:
#EditorMainColumn {
overflow:hidden!important;
background:#f9f9f4;
border-top:1px solid black;
padding:20px;
color:#432c01;
}
#EditorPanesWrapper {
width:auto;
margin-right:20px;
overflow:auto;
}
.ComboBoxListWrapper{
position:relative;
top:-10px;
}
.ComboBoxList{
border: 1px solid red;
width:288px;
position:absolute;
z-index:2;
margin-left:180px;
}
.ComboBoxList a {
display:block;
border: 1px solid #DDD7C6;
border-top:0px;
float: left;
padding: 8px;
padding-left:0px;
top:-11px;
color: #432C01;
width:279px;
font-weight: bold;
font-size: 10px;
background:white;
}
How do I get the div to expand for the combo-box's height while still keeping the options list over/above the other form elements?
as i notice using this
EditorPanesWrapper
inside the TD make the size fix,
Try to give an specific width and height in % if you want it to adjust to the content of your page.
Another question why do you need to put it into a table ? you can just use div
This page shows two images, each contained inside a separate span displayed as an inline block. To the first image is applied the additional style of "display:block", which removes the space between the image and the bottom of its green-bordered span (which space is provided for descenders when an element is styled as inline). Contrawise, this space is visible between the second image (still displayed as inline) and the blue border of the second span.
Why does displaying the first image as a block create space between the first image's span and the element containing the span (orange box)? Is it because when one inline element is contained inside another, the spaces allotted for descenders merge in the manner of vertical margins? Also I am wondering why there is a one-pixel space between the top of the blue span and the orange container.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span>
<span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
</div>
</body></html>
JSFiddle
Whenever there is any whitespace between two inline elements in HTML, the whitespace in will force a gap between them. This happens to your <span> elements because they are inline-elements. This gap can be removed by removing any whitespace between your two span tags, eg:
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
If your images are not set to display: block, you can remove the extra vertical-space by setting line-height: 0; on your <span> elements.
If you are setting your images to display: block, it seems like your best is to use the vertical-align property to align them with each other; try:
.product_box, #stats { vertical-align: middle; }
It's usually a good idea to use a CSS Reset when developing, to minimize the effect of these browser-defaults.
Updated Code:
HTML:
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg" />
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" />
</span>
</div>
CSS:
.product_box, #stats {
line-height: 0;
vertical-align: middle; }
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
Preview: http://jsfiddle.net/Wexcode/4QNhG/
Edit:
Changing the first image to display block doesn't create the space between the image and the containing element, it was there before.
With regards to the one-pixel space: this is just to account for the border of the other element. Whether or not the first image is display-block doesn't matter:
First span no border: http://jsfiddle.net/A6aLW/3/
Both spans no border: http://jsfiddle.net/A6aLW/5/