Im trying to display an address using a div layout so that the address will be displayed something like this:
Customer Name: John Doe
Address Line 1: Example Street 13
Address Line 2:
Postal Code: 90210
My current layout works fine as long as I have data in every field, but if for an example the value for Address Line 2 is nothing/empty then the layout breaks because the divs for Postal Code moves up on the same line as Address Line 2.
I've made a JSFiddle to illustrate the problem.
JSFiddle: http://jsfiddle.net/Zwfzp/2/
What changes should I make to the CSS in order to make it work?
CODE:
<div class="display-label">
Customer Name:
</div>
<div class="display-field">
John Doe
</div>
<div class="display-label">
Address line1:
</div>
<div class="display-field">
Example street 13
</div>
<div class="display-label">
Address line2:
</div>
<div class="display-field">
</div>
<div class="display-label">
Postal code::
</div>
<div class="display-field">
90210
</div>
CSS:
.display-label
{
float:left;
width: 150px;
text-align:right;
font-size:small;
font-weight:bold;
}
.display-field
{
margin-left: 160px;
font-size:small;
}
Best regards
Christian
Try this CSS:
.display-label
{
float:left;
width: 150px;
text-align:right;
font-size:small;
font-weight:bold;
clear:both;
}
.display-field
{
margin-left: 160px;
font-size:small;
float:right;
}
Float both .display-label and .display-field to the left, float: left; and add clear: left; to .display-label. I removed the margin from .display-field and added some padding.
The clear: left; will prevent all the divs from lining up in a single line and push it down below the div preceding it.
Here is an updated fiddle: http://jsfiddle.net/Zwfzp/4/
CSS
.display-label
{
float:left;
width: 150px;
text-align:right;
font-size:small;
font-weight:bold;
clear: left;
}
.display-field
{
float: left;
font-size:small;
padding-left: 10px;
}
Specify an equal height for both elements on CSS style, e.g.
.display-label
{
float:left;
width: 150px;
text-align:right;
font-size:small;
font-weight:bold;
height: 20px;
}
.display-field
{
margin-left: 160px;
font-size:small;
height: 20px;
}
You can use pseudo element :after to append a non-visible space.
See your adjusted JSFiddle
.display-field:after
{
content: ' ';
visibility: hidden;
}
Use PHP or JavaScript to check for the empty fields that needed to be remove on output.
Related
i want to add padding to left and right of the value of content property of before, after pseudo element..
html is-
<div class="header-contact">
<p>Mail: info#domain.com</p>
<p>Tel: xxxxx xxxxxxxx</p>
</div>
and css is-
.header-contact p{
float:right;
padding-left:10px;
position:relative;
}
.header-contact p:last-child:after{
content:"|"; //i want to add padding to its right and left
position:absolutes;
}
Not sure if this is what you wanted. You need to apply display:blockor display:inline-block property on the pseudo element, for it to render with padding:
.header-contact p:last-child:after{
content:"|";
padding:0 10px;
display:inline-block;
}
JSFIDDLE
You can try this:
.header-contact p{
float: right;
}
.separator{
padding: 0 10px;
}
<div class="header-contact">
<p>Mail: info#domain.com</p>
<p>Tel: xxxxx xxxxxxxx</p>
</div>
Working code
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
How can I get a line, text and then a line in a straight line?
code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.
How to do so that they appear like
---------------------- About Me ---------------------
(^^dotted line above should actually be single line.)
Use this -
#about_me1 hr, #about_me1 h3{
display: inline-block;
vertical-align: middle;
}
Here's updated Fiddle
Try this and have a look to display:inline-block in style
<header id="about_me">
<div id="about_me1">
<hr size="5" align="left" color="black" style="display:inline-block;width:30%;">
<h3 style="display:inline;">About Me</h3>
<hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;">
</div>
</header>
Use only one element to show border, which will work in every resolution and reusable:
<header id="about_me">
<div id="about_me1">
<h3><span>About Me</span></h3>
</div>
</header>
#about_me1 {
border-top: 2px solid #FF0000;
position: relative;
margin-top:15px;
}
h3 {
position: absolute;
top: -18px;
text-align:center;
width:100%;
padding:0;
margin:0px;
}
h3 span {
background:#fff;
display: inline-block;
padding: 5px;
}
Demo
My floats are acting strange (well I guess they're acting how they're supposed to), but I can't seem to understand why. For some reason the div box that contains 'Alex' always goes down to another line. Is there something I'm messing up?
style.css
.clear {
clear:both;
}
.page-header {
width:100%;
background:#efefef;
border-bottom:1px #ddd solid;
padding:3px 10px;
margin-bottom:24px;
}
.page-header-title {
width:200px;
float:none;
}
.page-header-search {
float:left;
width:100px;
}
.page-header-top_menu {
float:right;
width:200px;
}
index.html
<div class="page-header">
<div class="page-header-search">
blah
</div>
<div class="page-header-title">
Calender
</div>
<div class="page-header-top_menu">
Alex
</div>
<div class="clear"></div>
</div>
Thank you very much.
If you exchange the
float: none;
for the "calender"-div with
float: left;
the "Alex" behaves better.
You didn't specify how it should look like.
http://jsfiddle.net/wDp3p/ << I visualized your div-structure with red borders.
http://jsfiddle.net/wDp3p/1/ << version with float: left;
"float" is not really for solutions like table columns but for floating - so the "calender"-div floats directly after its left hand previous element.
You're floating it wrongly. You should assign a float property to .page-header-title.
I'm trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:
Line 1: 5,343 (right aligned)
Line 2: + (left aligned) 32 (right aligned) --- Note that the plus sign and bottom number are on the same line.
Line 3: ------ (horizontal line)
I've been fooling around with this for the last hour and have had very little luck.
I laid by HTML out like this:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>
A semantic approach
Here's a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here's the markup for an equation:
<span class="equation">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
That alone renders horizontally:
5,343
+
32
=
5,375
With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:
<span class="equation stacked">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
The following CSS does the magic:
.equation.stacked {
display: inline-block;
}
.equation.stacked .number {
display: block;
margin-left: 1em; /* space for the operator */
text-align: right;
}
.equation.stacked .operator {
float: left;
}
.equation.stacked .equals {
display: block;
height: 0;
border-bottom: solid 1px black;
overflow: hidden;
}
This renders like this:
Here's a JSBin you can explore: http://jsbin.com/afemaf/1/edit
Do you mean something like this?: http://jsfiddle.net/PkfAU/2/
What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.
.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).
HTML:
<div class="container">
<div class="first">5,343 </div>
<div class="second">
<div class="plus">+</div>
<div class="number">32</div>
</div>
<div class="third">
<div class="result">5,375</div>
</div>
</div>
CSS:
.container {
width:200px;
}
.first,
.second {
width:200px;
text-align:right;
display:table;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:200px;
text-align:right;
border-top:1px solid black;
}
I think this may be your best bet:
HTML:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="lowerNum">
<span class="operand">32</span>
<span class="sign">+</span>
</p>
<br class="clear" />
<p class="line"><hr></p>
</div>
CSS:
#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }
Here's a fiddle that shows this effect also:
http://jsfiddle.net/8CPar/
Here, you can contain the bottom line in a paragraph, then give the operator and operand a separate span container that you can float, giving you the desired effect. Then, you add a "clear break" which clears the float, making the horizontal break show correctly.
I hope this helps!
There are some fine examples here, but I went through with the effort of making a fiddle so might aswell post it.
You just need to ensure that widths and alignments are set correctly and it should work out.
My JSFiddle Example.
<div id="list">
<span class="item">5472</span>
<span class="operator">+</span><span class="item operand">32</span>
<hr class="divider"/>
<span class="result">5504</span>
</div>
With css
.list
{
width:50px;
}
span
{
display:block;
margin-left:20px;
font-family:"Lucida Console", Monaco, monospace;
width:50px;
}
.operator
{
float:left;
width:20px;
margin-left:0px;
}
.divider
{
clear:both;
width:40px;
margin-left:20px;
}
.operand
{
float:left;
width:50px;
}
I also created an example using pre, that uses pre formatted text, so it should still be precise.
Classics,
<html>
<head>
<style type="text/css">
.textbox
{
width: 100px;
}
.upperNum
{
text-align: right;
width: 100%;
}
.sign
{
float: left;
text-align: left;
}
.lowerNum
{
text-align: right;
}
.secondline
{
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="textbox">
<div class="upperNum">
5,343
</div>
<div class="secondline">
<div class="sign">
+
</div>
<div class="lowerNum">
32
</div>
</div>
<div>
<hr />
</div>
</div>
</body>
</html>