I am getting the following validation errors:
Line 63, Column 7: End tag for body seen but there were unclosed elements.
</body>
Line 19, Column 25: Unclosed element section.<section id="content"
I am using a HTML5 validator and I suspect this error is why my sidebar is not aligning.
CSS:
html{
height:100%;
}
body{
width:960px;
height:100%;
margin:0 auto;
}
p,h1,h2{
margin:25px;
}
header{
width:100%;
border-bottom:1px solid green;
}
header #logo{
height:90px;
width:150px;
border:1px solid red;
}
header nav{
width:100%;
height:45px;
border:1px solid red;
}
header nav ul{
float:left;
}
header nav ul li{
display:inline;
}
header nav li a{
float:left;
text-decoration: none;
margin-left:15px;
}
#content{
float:left;
width:705px;
height:100%;
border:1px solid red;
}
#showcase{
position: relative;
width:705px;
padding:20px 0px 20px 20px;
}
#showcase ul{
float:left;
display:block;
margin-left:-20px;
margin-bottom:20px;
width:200px;
border:1px solid green;
list-style:none;
}
#showcase ul li h3{
margin: 0 0 0 -15px;
letter-spacing: -0.25px;
margin: 4px 0px 3px 0px;
text-indent: 3px;
}
#showcase ul li h3 a {
color: #010101;
text-decoration: none;
}
#showcase ul li h3 a:hover {
color: #4fbcd8;
}
#showcase ul p {
height:70px;
margin:0 0 0 -15px;
line-height: 1.6em;
padding-left: 3px;
}
#showcase ul img{
width:175px;
height:137px;
background-color:pink;
}
#sidebar{
float:right;
height:100%;
width:225px;
border:1px solid red;
}
#box_one, #box_two, #box_three{
height:100px;
border-bottom:1px solid #ccc;
}
footer{
clear:both;
height:24px;
border:1px solid red;
}
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo">Template Here</div>
<nav>
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</nav>
</header>
<section id="content">
<h1>Main Content Section</h1>
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
</section>
<section id="sidebar">
<div id="box_one">
<p>Box One</p>
</div>
<div id="box_two">
<p>Box Two</p>
</div>
<div id="box_three">
<p>Box Three</p>
</div>
</section>
<footer>
<p>This is the footer</p>
</footer>
</body>
add a </section> closing-tag on line 48 just above the other </section> . it is missing there
The following portion of code seems to be missing an end section tag:
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum....</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>
Related
I've written CSS that should hide the container div in the middle of the page, when the list div on the left is hovered over.
I've got a feeling that giving the container div a fixed position is causing this, but I'm not quite sure. The code seems correct.
Html
<section class="container">
<div class="description">
<h2>Writer</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p>
</div>
</section>
<div class="list">
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></li>
</ul>
</div>
<div>
css
.container {
position:absolute;
justify-content:center;
align-items:center;
box-sizing:border-box;
display:flex;
width:500px;
left:325px;
align-content:space-around;
}
.list {
width:325px;
margin: 20px 30px 20px 0;
box-sizing:bordr-box;
overflow-x:hidden;
}
ul {
list-style-type:none;
margin:0;
padding:0
}
.projectImage img {
display:none;
}
.list .projectImage:hover img {
display: block;
margin: 0;
top: 20%;
left: 50%;
transform: translate(-50%);
position: absolute;
display: block;
/* width: 100%;
height: 100%; */
}
.list:hover + section.container {
display: none;
}
.list:hover + section.container would only work if .list would be the preceding sibling of section.container. But your section.container is placed before .list.
The only way to make it work is to place .list before section.container. To display section besides .list, I used float: left; on .list.
Working example: https://codepen.io/anon/pen/PmJZgm?editors=1100
Note 1: you might have to tweak the margins/paddings a bit.
Note 2: If you place any content after section, when hiding it the rest of the content will jump up. If you don't want this, you probably want to try
.list:hover + section.container {
opacity: 0;
}
If you move .list before .container, your selector will work. I added a parent element (main) to .list and .container and used flex on the parent instead of using position: absolute on .container to get it beside .list.
#helene, body, html {
width:100%
}
body {
background-color:#FFFAF1;
}
#site {
height:100%;
width:100%;
box-sizing:border-box;
vertical-align:middle;
overflow:hidden;
display:block;
}
.title {
position:fixed:
z-index:10;
text-align:center;
}
.container {
justify-content:center;
align-items:center;
box-sizing:border-box;
display:flex;
flex: 0 0 500px;
align-content:space-around;
}
.list {
flex: 0 0 325px;
margin: 20px 30px 20px 0;
box-sizing:bordr-box;
overflow-x:hidden;
}
ul {
list-style-type:none;
margin:0;
padding:0
}
.projectImage img {
display:none;
}
.list .projectImage:hover img {
display: block;
margin: 0;
top: 20%;
left: 50%;
transform: translate(-50%);
position: absolute;
display: block;
/* width: 100%;
height: 100%; */
}
.list:hover + section.container {
display: none;
}
main {
display: flex;
}
<div id="helene">
<div id="site">
<header class="title">
<h1> Helene Selam Kleih</h1>
</header>
<main>
<div class="list">
<h2>In Conversation With-</h2>
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
</ul>
<h2>Articles - </h2>
<ul class="projectList">
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
<li class="projectImage">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></li>
</ul>
</div>
<section class="container">
<div class="description">
<h2>Writer</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue
rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p>
</div>
</section>
</main>
</div>
</div>
I'm quiet surprise I thought the use of container-fluid will give me a full width carousel but it didn't. It has a padding right and left of 15 px so i add a new class remove-padding in order to have no padding but it didn't work.
Any idea for having a carousel without padding ?
$(document).ready(function(){
$('.slick-carousel').slick({
arrows:true,
prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
});
});
.slick-prev {
left: 50px;
}
.slick-next {
right: 50px;
}
.slick-prev, .slick-next {
background: none;
border: medium none;
color: blue;
cursor: pointer;
display: block;
font-size: 24px;
height: 20px;
line-height: 0;
margin-top: -10px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
}
.slick-prev:before {
content: "";
}
.slick-next:before {
content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }
.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 pen">
<div class="page-header">
<h5>Slick Carousel</h5>
<h1>Basic Carousel</h1>
<ul class="technology">
<li>Bootstrap <span class="label label-default">3.3.4</span></li>
<li>jQuery <span class="label label-default">2.1.3</span></li>
<li>
<span class="glyphicon glyphicon-book"></span> Documentation
</li>
</ul>
</div>
</div>
</div>
<!-- /container --></div>
<div class="container-fluid remove-padding">
<!-- START MOD -->
<div class="slick-carousel">
<div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
<h1>Title 1</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg" class="img-responsive">
<h1>Very long crazy long mega long title</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg" class="img-responsive"><h1>Title Title title</h1></div>
</div>
<!-- END MOD -->
</div>
<!-- /container --></div>
<div class="container"><div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div></div>
Add class row next to class slick-carousel.
This fixed the problem.
Some explanation:
.container-fluid adds 15px of padding on the left and right in addition to horizontal auto margin.
You can simply remove .container > .row > .col-sm-12 in your html and just use a div.
I am trying to put a (horizontal) separator div between my 2 content divs. Instead of putting it between them, it shows under my banner div (above the 2 content divs).
Here is structure of my html:
<body>
<div id="page">
<div id="header">
<div id="logo"></div>
</div>
<div id="menuContainer">
<div id="menu">
<ul id="btns">
<li>DOMOV</li>
<li>SVETEĽNÉ ZDROJE</li>
<li>CHLADIČE</li>
<li>NAPÁJANIE</li>
<li>KONEKTORY</li>
<li>OPTIKA/REFLEKTORY</li>
<li>KONTAKTY</li>
</ul>
</div>
</div>
<div id="banner"></div>
<div id="separator"></div>
<div id="contentContainer">
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="pic1"></div>
<div id="pic2"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="oddelovac1"></div>
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="citizen"></div>
<div id="qlt"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="separator"></div>
<div id="contentBlock>
... The same structure
</div>
</div>
</div>
</body>
And here is my CSS:
body {
margin:0;
}
#page {
width:100%;
}
#header{
width:1000px;
height:100px;
margin:auto;
}
#logo {
width:140px;
height:47px;
background:url('../img/logo.png')no-repeat;
margin-top:50px;
}
#menuContainer {
height:37px;
width:100%;
background:#c4c8ca;
}
#menu{
width:1000px;
margin:auto;
}
#menu ul {
padding-top:8px;
text-align:right;
}
#banner {
width:100%;
height:353px;
background:url('../img/banner.png')no-repeat;
margin-top:2px;
}
#separator {
width:100%;
height:31px;
background:url('../img/oddelovac.png')no-repeat;
margin-top:6px;
}
#contentContainer {
width:100%;
display:block;
}
#contentBlock {
width:1000px;
margin:auto;
}
#contentLeft {
width:650px;
float:left;
}
#contentRight{
width:350px;
float:left;
}
add clear: both to #separator or overflow: hidden to #contentBlock.
edit:
You use same id attribute value for many elements - there can be only one, unique.
If you want to use same style to many elements then use class.
just add float:left
#contentBlock {
width:1000px;
margin:auto;
float:left;
}
#separator {
width:100%;
height:31px;
background-color:rgb(255,0,255);
margin-top:6px;
float:left;
}
A following html markup creates a QA section in my site.
I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line.
Like this:
But for now it looks this way:
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
}
</style>
</head>
<div class="qa">
<div class="question">
<b>Q</b>
<p>
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
Would be grateful for your help.
Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:
p strong {
float: left;
margin-left: -1.5em;
font-size: 3em;
}
p {
padding-left: 5em;
}
<p>
<strong>Q:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
<strong>A:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>
http://jsfiddle.net/userdude/cZJhU/5/
Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.
NOTE
For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:
I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:
http://jsfiddle.net/f8NjK/
<div class="wrapper">
<div class="leftcol">
<strong>Q</strong>
</div>
<div class="rightcol">
<p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
<strong>A</strong>
</div>
<div class="rightcol">
<p>Yes I do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so and so</p>
</div>
</div>
CSS:
strong {
font-size: 50px;
}
.wrapper {
width:100%;
}
.leftcol {
width:10%;
display:inline-block;
}
.rightcol {
width:80%;
vertical-align:top;
display:inline-block;
}
I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/
.container
{
width: 100%;
height: 60px;
}
.letter
{
font-size: 50px;
float: left;
}
.sentence
{
width: 350px;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
float: left;
z-index: 5;
}
Like this?
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
<div class="question">
<b>Q</b>
<p style="display: inline-block;">
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p style="display: inline-block;">
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.
This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements
<div class="qa">
<div class="question">
<div class="bold-letters">Q</div>
<div class="questions">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="answer">
<div class="answer_box">
<div class="bold-letters">A</div>
<div class="answers">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
and some short css
.bold-letters, .answers, .questions{
display:inline-block;
}
.bold-letters{
font-size:50px;
vertical-align:top;
margin-right: 30px;
}
.questions{
vertical-align:bottom;
}
I was writing this while the other answers popped up
http://jsfiddle.net/tprats108/ugaYM/
css:
.qa {
font-size: 25px;
}
.qa .heading {
font-weight: bold;
font-size: 50px;
float: left;
}
.qa .response {
float: left;
margin-left: 20px;
}
.clear {
clear: both;
}
html:
<div class="qa">
<div class="question">
<div class="heading">Q</div>
<div class="response">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="clear"></div>
<div class="answer">
<div class="heading">A</div>
<div class="response">
<p>Yes I Do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so so so.</p>
</div>
</div>
</div>
I want to create a DIV with a header of 6px height and inside the div body, I want to align an Image and Text next to each other. The height of the DIV body should be fixed.
Here's a very simple example of how to do what you want (using inline styles):
<div>
<div style="height:6px;width:500px;background-color:#3399CC;"></div>
<div style="clear:both"/>
<div style="float:left"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></div>
<div style="float:left">Your Text Here</div>
</div>
<div style="clear:both"/>
You can test this code and try editing it in real time here: http://htmledit.squarefree.com/.
Try creating a html page with the following code:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
margin-right: auto;
margin-left: auto;
width: 200px;
height: 200px;
background: #acf;
}
#header {
background: #f98;
padding-bottom: 1px;
}
#container img {
background: #000;
float: left;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Heading</h1>
</div>
<img src="image.jpg" alt="" height="25" width="25" />
<p>Text text text</p>
</div>
</body>
</html>
Building on Jon. A 6px header is mighty darn small!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Div layout</title>
<style type="text/css">
/*<![CDATA[*/
#container {
margin:0 auto;
width:400px;
height:300px;
overflow:scroll;
background:#acf;
padding:0;
}
#container h1 {
background:#f98;
padding:0 0 1px 0;
height:6px;
font-size:2px;
text-align:center;
font-weight:normal;
border:3px #FFA500 outset;
}
#container img {
background:#000;
float:left;
padding:10px;
margin:10px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<h1>Heading</h1><img src="image.jpg" alt="" height="25" width="25" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Nulla sit amet tellus vel augue
hendrerit pellentesque. Aenean cursus, quam nec volutpat interdum, nibh
sapien elementum mi, id accumsan neque risus a est. Praesent libero
metus, tincidunt at, vulputate eu, vehicula at, arcu? Donec orci metus,
ornare non, viverra vel, vehicula ac, dui. Aliquam erat volutpat. Fusce
malesuada urna quis augue. Mauris in purus. Maecenas at est. Nunc
vestibulum feugiat justo. Etiam nec urna. Nulla facilisi. Ut enim.
Nullam sit amet mauris eu quam eleifend vestibulum! Cras lectus turpis,
cursus nec, fermentum egestas, fermentum non, tortor.</p>
</div>
</body>
</html>