What's wrong with my font face here? i cant figure it out and apparently this isn't long enough
#media not print{}
body {color: #635959; font-family: news_cycle; }
header { background-color: #242323;
color: #EFEFEF;
font-family: contail_one;
}
article h3, h4 {color: #8C1018; }
article a {color: #314052;}
}
header h1 {font-size: 4em;}
figure > figcaption {font-size: 0.75em; font-style: italic;}
main figure > figcaption ::before { content: pictured above; font-weight: bold; }
article > time {float: right; font-size: 0.75em; font-weight: lighter; }
#media not print {
main > h3 {
font-size: 2em;
}
}
header {padding: 20px 50px;}
main padding: {5px 10px;}
#font-face { font-family: news_cycle; src: url('../css/news_cycle.ttf') format('truetype')}
#font-face {font-family: contail_one; src: url('../css/contail_one.ttf') format('truetype')}
article {margin: 5px 0px; padding: 5px 5px; box-shadow: 1px 1px 6px #888888}
media print {
header {padding: 0px;}
article {box-shadow: none;}
header h1 {font-size: 2em;}
header h2 {display: none;}
}
<!doctype html>
<html lang="en-us">
<head>
<title> Contoso News </title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<header>
<h1> Contoso news </h1>
<h2> on time, on topic </h2>
</header>
<main>
<h3> Latest Articles </h3>
<article>
<time datetime="16-01-2016">`Friday, Jan 16 </time>
<h4>International Story</h4>
<p>Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. read more... </p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Finance Story</h4>
<p>Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat. Cras vel orci quis velit efficitur ullamcorper sed eu ex. Nullam vel ex nec lectus imperdiet luctus vitae vel nibh.
</p>
<figure>
<img src="../images/img.jpg" alt="debit card">
<figcaption> New Debit Cards with Chip-Based Security. </figcaption>
</figure>
<p> Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie. Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href+"#" target="_blank"> read more... </a></p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Technology Story</h4>
<p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus efficitur. In in augue at enim tempor sollicitudin.<a href+"#" target="_blank"> read more... </a></p>
</article>
</main>
<h4> sign up for our emails </h4>
<summary>
<form>
<label> e-mail address: </label>
<input type="text" id="label1" name="email" required>
<label for="label2"> Delivery Preference: </label>
<select>
<option value="daily"> daily </option>
<option value="weekly"> weekly </option>
<option value="monthy"> monthly </option>
</select>
<input type="submit" value="sign-up">
</summary>
</body>
</html>
Related
I am working on a page with a lot of text on it, and I want to include an image. The problem is that the img is taller than the paragraph. Does anyone know how I can make the img 100% of its container?
.container {
width: 40%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
<body>
<p class="container">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>
The problem is that float takes the image otu of the standard flow, so you need to implement Clearfix:
1. Create the clearfix class in CSS:
Add the following CSS (Note: this it works for IE8 and higher. If you need to support older browsers, check the link above).
.clearfix:after {
content: "";
display: table;
clear: both;
}
2. Apply the clearfix to your HTML:
Add the clearfix class to the div that holds your image i.e. <p class="container clearfix">
Working Demo:
Note: I have your container width to 100% so that you can see the effect - otherwise in the small CodeSnippet window, the text was not short enough to cause the issue you describe.
.container {
width: 100%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<p class="container clearfix">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>
I have issue with margin on dompdf using plain html. I have added margin-top to div but adds some extra space at the the end of element.
It works perfectly if no margin-top is added. As shown in following screenshot
As I add margin-top to div it adds extra spacing at the end of that div as shown in following screenshots. HTML is perfect but issue in generated pdf only.
HTML 1:
PDF 1:
HTML 2:
PDF 2:
I searched a lot for the issue but cannot find any solution regarding this why it adds space after the element when I use margin-top:15px; I tried margin: 15px 0 0 0; but no luck with that too.
I am using latest version of dompdf
HTML Code snippest:
*{margin:0; padding:0}
body { padding: 50px 0; margin: 0px; font-family: Georgia; }
ul{padding-left:40px; }
.resume-container {width: 90%;margin:0 auto;background-color: #fff;}
.reasume-header{width: 100%; border-bottom: 1px solid #DADADA}
.reasume-header .head{font-weight: bold;font-size: 28px;}
.small-font {font-size: 12px;}
.header{margin-top:15px; margin-bottom:0;}
h1{font-size: 20px; font-weight: bold; margin: 0px;}
.content{margin-top: 15px}
#template1 .header .title-header h1{background: #769AC2; color: #FFF; padding: 5px 0; text-align:center}
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Resume</title><style type="text/css">
</style>
</head>
<body>
<div class="resume-container" id="template1">
<div class="header w100 temp6-hidden" border="0" id="expertise_part" style="clear:both;">
<div class="w100 align-top title-header">
<h1>EXPERTISE</h1>
</div>
<div class="inner-content" style="clear:both;">
<div class="content details" style="background: #F0F0F0">
<ul>
<li>Wide range of design experience building mobile sites to E-Commerce front end sites.</li>
<li>Expert in Joomla and WordPress Customization.</li>
<li>Highly proficient in Photoshop, Illustrator, HTML5 and XSLT.</li>
<li>Experienced with social media marketing and search engine optimization.</li>
<li>Highly skilled in layout designs for print in InDesign and custom logotypes.</li>
</ul>
</div>
<div class="content details">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque. Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque. Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.Duis volutpat tincidunt laoreet. Nullam congue, metus vitae dapibus varius, ipsum turpis sollicitudin sapien, ut faucibus tellus erat id magna. Nunc consectetur dolor vel molestie lobortis. Proin volutpat commodo metus, non luctus turpis pulvinar et. Aliquam erat volutpat. Etiam consequat imperdiet ligula. Quisque finibus, nibh sit amet posuere maximus, diam dolor volutpat lacus, ut luctus enim dolor sed urna. Donec nec enim ut risus cursus tincidunt ut et libero.
</div>
</div>
</div>
<div class="header w100 temp6-hidden" border="0" id="education_part">
<div class="w100 align-top title-header">
<h1>EDUCATION</h1>
</div>
<div class="inner-content">
<div class="w100 content " style="background: #F0F0F0">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="lft" style="width:60%">
<strong class="dt_area">ABC University</strong>
</td>
<td align="right" style="width:40%;"><strong class="dt_area">INDIA, Kerala</strong></td>
</tr>
<tr>
<td class="lft" style="width:60%"><strong class="dt_area">MCA</strong></td>
<td align="right" style="width:40%;"><strong class="dt_area"><strong class="dt_area">2/2001 - 3/2004</strong></strong></td>
</tr>
</table>
</div>
<div class="content details" style="width:100%;clear:both;font-size: 14px; font-family:Arial;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque.<br />
Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque.<br />
Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.
</div>
</div>
</div>
</div>
</body>
</html>
I should build this layout
layout
but after various tests, I don't understand how place the image.
The text continues from one div to another. I've think to use the column CSS3 property but I think it's not the better solution.
How can I implement this layout?
Thanks in advice.
EDIT:
This is the HTML and CSS code of the last test:
.span11{
width: 90%;
display: block;
margin: 0 auto;
-moz-column-count: 2;
-moz-column-gap: 20pt;
-webkit-column-count: 2;
-webkit-column-gap: 20pt;
column-count: 2;
column-gap: 20pt;
}
#foto{
float: right;
margin-top: 50px;
}
<div class="span11">
<div id="foto">
<img src="http://fpoimg.com/600x400?text=Preview" >
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui ellus.Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.
</div>
This is Jsfiddle of the last test:
http://jsfiddle.net/DVwws/
After working with the example you found here I was able to edit the source code and eventually create a JSFiddle with your desired result.
General guide to accomplish this:
Create two side-by-side divs filled with text
Use the "Content" CSS property to create "holes" in your paragraphs where they are desired with content: ""; width: 125px; height: 250px;.
Use absolute positioning to place an image within that "hole" you created.
This image should assist in understanding the placing concept: (Just imagine the green-section as being the hole and centered vertically)
Here is the HTML and CSS from the JSFiddle I made:
<style>
#page-wrap { width: 100%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 125px; left: 50%; margin-left: -125px; }
.left, .right { width: 49%; text-align: justify}
.left { float:left; }
.right { float:right; }
#l, #r { width: 100%; position: relative;}
#l { float: left; text-align: justify}
#r { float: right; text-align: justify}
#l:before, #r:before { content: ""; width: 150px; height: 250px; vertical-align:-50%;}
#l:before { float: right;}
#r:before { float: left; }
</style>
AND
<div id="page-wrap">
<img src="http://placekitten.com/250/250" id="logo">
<div class="left">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="l">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metuPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt conum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursusdiment faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </div>Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
<div class="right">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="r">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
</div>
Also since you said you were loading your text dynamically from a data-base here is an easy way to calculate it's length and break it into two equal chunks.
<?php
//some SQL Queries setting $str
$len = strlen($str);
$part1 = substr($str, $len/2);
$part2 = substr($str, $len/2+1,$len);
// Insert $part1 & $part2 text chunks into each div.
?>
NOTE: Due to the exact cut, if that character number is in the middle of a word that word will be cut into two parts. There are resources to easily figure out how to cut on the next space; but that does not pertain to this specific question.
A general starting-question about Jeet, just for learning the system:
How can I get blocks lined up equally in nested blocks in Jeet Framework?
How can something like this be made, with floating width on max-width: 1450px? And within Jeet philosophy with as little id and classes as possible? On my actual site I had to use at least some classes to get there.
<html>
<head>
<style>
#container { width: 950px; margin:0 auto; padding:30px; }
#leftblock { float:left; width:610px; }
.fullwidthleft { clear:both; }
.fullwidthleft-inner { padding:30px; background:#999; }
.left { float:left; padding:30px; width:245px; background:#aaa; }
.right { float:right; padding:30px; width:245px; background:#bbb; }
#sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
.fullwidth { clear:both; padding:30px; background:#ddd; }
</style>
</head>
<body>
<div id="container">
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div id="sidebar">
Sidebar 1
<p>
lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
</p>
</div>
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div class="fullwidth">
Fullwidth
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</body>
</html>
See http://botanisk-hage-tromso.net/jeet-test.html
Jeet author here. I'm not against classes, but I don't think they need to be used for everything.
I recreated your example in about 2 minutes with a much smaller HTML/CSS footprint. Let me know if it helps or you have any further questions about it, but hopefully it gives you a better understanding of Jeet.
If you learn nth-child, you'll have a much nicer time: http://css-tricks.com/how-nth-child-works/
HTML: http://pastie.org/7949308
Stylus:
div
center()
.left_side
span(2,3)
aside
span(1,3)
padding 15px 30px
background rgba(0,0,0,.25)
article
span(1,2)
padding 15px 30px
background rgba(0,0,0,.1)
&:nth-child(3n+2)
background rgba(0,0,0,.2)
&:nth-child(3n+3)
span(1,1)
background rgba(0,0,0,.15)
.full_width
span(1,1)
padding 15px 30px
background rgba(0,0,0,.3)
h1
margin 0 0 10px
Result: http://jeetframework.com/examples/1/
I am using ASP.net MULTIVIEW control, but when I enter text in one of it's VIEW the text got expanded beyond specified width i.e. 200px in Visual Studio. What I want is to wrap the text within container. Here is the code. You can simply paste it in Visual Studio to see the problem.
<div style="width: 200px">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<p>
In ipsum risus, luctus eu lobortis eu, ultricies nec diam. Pellentesque non pharetra
odio. Etiam nisi felis, sagittis sit amet tempor sit amet, lacinia et mauris. Sed
id dui nisl, vitae pellentesque sapien. Sed justo elit, mattis a ornare egestas,
congue id tortor. Donec pharetra est sit amet augue scelerisque ultrices. Sed ac
urna nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Maecenas risus quam, adipiscing non euismod ut, luctus ac magna.
Curabitur id nulla at magna vehicula scelerisque ac gravida ipsum. Integer non tellus
tortor.
</p>
</asp:View>
<asp:View ID="View2" runat="server">
some text here
</asp:View>
</asp:MultiView>
</div>