I've been struggeling with this for a while and I can't really seem to find an answer online.
So I've been trying to place two divs next to eachother, and afterall that worked. However, those divs are placed at the very left of the page and once I make my webbroswer window smaller the right div is placed on the left div, which I don't want (it should always be placed next to the left div, also if the window is smaller). Secondly, those divs should be placed in the center of the page, which I can't seem to let it work.
I placed my script in jsFiddle: http://jsfiddle.net/LZMf3/
The problem is related with the lower white boxes, the div code is #midden_box1 (left) and #midden_box2 (right). The yellow background is #midden.
style.css
#charset "utf-8";
/* BOVENKANT */
body, html, #map {
margin: 0;
width: 100%;
height: 85%;
text-align: left;
color: black;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#bovenkant{
width: 100%;
height: 40px;
background-color: black;
text-align: center;
line-height: 250%;
vertical-align: middle;
color: white;
font-weight: bold;
font-size: 18px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#box{
width: 300px;
background: rgba(0,0,0,0.8);
z-index: 1000;
position: absolute;
top: 80px;
left: 50px;
padding: 10px;
border-radius: 10px;
text-align: left;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* MIDDENSTUK */
#midden{
background: #DBA901;
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
#midden_box1{
background: white;
width: 300px;
height: auto;
padding: 10px;
float: left;
overflow: hidden;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
#midden_box2{
width:200px;
background: white;
width: 800px;
height: auto;
float: left;
padding: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
}
/* onderstuk */
#onderkant{
width: 100%;
height: 40px;
background-color: black;
text-align: center;
line-height: 250%;
vertical-align: middle;
color: white;
font-weight: bold;
font-size: 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
}
/* TEKST OPTIES */
/* bovenkant */
#bovenkant a:link {
color: white;
text-decoration: none;
}
#bovenkant a:visited {
color: white;
text-decoration: none;
}
#bovenkant a:hover {
color: #F90;
text-decoration: none;
}
/* midden */
/* midden_box1 */
#midden_box1 a:link {
color: #630;
text-decoration: none;
}
#midden_box1 a:hover {
color: #650;
text-decoration: none;
}
#midden_box1 a:visited {
color: #630;
text-decoration: none;
}
#midden_box1 p {
line-height: 20px;
font-size: 9px;
bottom: 5px;
}
#midden_box1 b.titel{
font-size: 20px;
line-height: 2px;
color: #630;
}
#midden_box1 p.datum{
font-size: 9px;
color: #630;
}
#midden_box1 b.dagboektitel{
font-size: 15px;
line-height: 1%;
color: #630;
}
/* midden_box2 */
#midden_box2 a:link {
color: #630;
text-decoration: none;
}
#midden_box2 a:hover {
color: #650;
text-decoration: none;
}
#midden_box2 a:visited {
color: #630;
text-decoration: none;
}
#midden_box2 p {
line-height: 20px;
font-size: 9px;
bottom: 5px;
}
#midden_box2 b.titel{
font-size: 20px;
line-height: 2px;
color: #630;
}
#midden_box2 p.datum{
font-size: 9px;
color: #630;
}
#midden_box2 b.dagboektitel{
font-size: 15px;
line-height: 1%;
color: #630;
}
#midden_box2 p.tekst{
font-size: 12px;
white-space: pre-wrap;
color: #300;
}
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<?
require 'definitie.php';
require 'verbinding.php';
?>
<title><?php echo INDEX_TITEL; ?></title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script>
<script type="text/javascript" src="./js/kaart.php"></script>
</head>
<body onload="getMap()">
<div id="bovenkant"><? echo MENU; ?></div>
<div id="map">
</div>
<div id="box">
<b><? echo INDEX_BOX_WELKOM; ?></b>
<p><? echo INDEX_BOX_INHOUD; ?></p>
</div>
<div id="midden">
<div id="midden_box1">
<b class="titel"><?php echo INDEX_BOX_MIDDEN_TITEL; ?></b>
<?php
$query = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,7"; // Formulering van de query
$resultaat = mysql_query($query); //query uitvoeren
while ($row = mysql_fetch_array($resultaat)){
?>
<?php echo "
<a href='./blog.php?id=".$row['id']."'>
<p class='datum'>".$row['plaats']." | ".$row['datum']."</p>
<b class='dagboektitel'>".$row['titel']."</b>
</a><br>
"; ?>
<?php
}
?>
</div>
<div id="midden_box2"> <?php $query1 = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,1"; // Formulering van de query
$resultaat1 = mysql_query($query1); //query uitvoeren
$row1 = mysql_fetch_array($resultaat1); ?>
<?php echo "<a href='./blog.php?id=".$row1['id']."'> <p class='datum'>".$row1['plaats']." | ".$row1['datum']." | ".$row1['auteur']."</p> <b class='titel'>".$row1['titel']."</b> </a> <p class='tekst'>".$row1['bericht']."</h5>" ?>
</div>
</div>
<div id="onderkant">
<? echo COPYRIGHT; ?>
</div>
</body>
</html>
Place both the divs in a wrapper and give that wrapper a margin:0 auto
then proceed as usual for placing two divs next to each other (follow here).
For working implementation of above go here.
/*markup*/<div class="wrap">
<div class="outerdiv">
<div class="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div class="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros.
</div>
</div>
/*style*/ *{ margin:0 ; padding:0 ;}
.wrap{
height:500px;
width:500px;
background:#f00 ;
}
.outerdiv{
width:80%;
height:100%;
background:rgba(0,255,0,0.5);
margin:0 auto ;
overflow:auto;
}
.div1{
float:left;
width:60%;
height:100%;
}
.div2{
height:100%;
margin-left:60%;
}
Related
I'm editing a Mailchimp template and I was trying to align two divs next to each other, which I accomplished sucessfully. The div on the left is filled with text, the div on the right features 4 images. Now I want to align this image grid vertically to the text, but it should change dynamically. So if the text gets longer, the image position should change and should always stay in the vertical center of the text.
.mcnTextContent {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
.mcnTextContent {
position: relative;
left: 0px;
padding: 10px !important;
}
.mcnTextBlockOuter {
padding: 0px !important;
}
.mcnTextBlockInner {
padding: 0px !important;
background-color: white;
}
.positionr {
position: relative !important;
}
.textcolumn {
width: 370px;
float: left;
height: auto !important;
}
.textcolumn h1 {
text-transform: uppercase;
color: black !important;
font-family: "Arial" !important;
font-weight: initial;
}
.textcolumn p {
font-family: "Arial" !important;
font-size: 14px !important;
color: black !important;
}
.imagecolumn {
float: right;
padding-top: 125px;
}
.imagecolumn img {
padding-left: 15px;
padding-top: 10px;
}
<div class="positionr">
<div class="textcolumn">
<h1>Header</h1>
<p>Body</p>
</div>
<div class="imagecolumn">
<img />
<img /><br />
<img />
<img />
</div>
</div>
Here is a proposal for a solution :
.positionr {
position: relative !important;
background: orange;
}
.textcolumn {
background: teal;
height: auto !important;
}
.textcolumn h1 {
text-transform: uppercase;
color: black !important;
font-family: "Arial" !important;
font-weight: initial;
}
.flex-container {
background: orange;
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-container p {
width: 370px;
font-family: "Arial" !important;
font-size: 14px !important;
color: black !important;
}
.imagecolumn {
background: blue;
}
.imagecolumn img {
padding-left: 15px;
padding-top: 10px;
background: red;
}
<div class="positionr">
<div class="textcolumn">
<h1>Header</h1>
<div class="flex-container">
<p>Donec consequat nulla ut odio sagittis interdum. Maecenas porttitor faucibus congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum nulla vitae leo mollis, ac sollicitudin erat tincidunt. Nam vel odio mauris. Aliquam vitae
lectus condimentum, auctor orci a, varius elit. In metus purus, egestas tincidunt ligula at, dapibus imperdiet elit. Nam leo leo, sodales vel justo sed, egestas eleifend ante. Aliquam consectetur nisl odio, sit amet volutpat ante fringilla non.
Sed in massa sem. Integer sit amet ultricies massa. Aenean eu ullamcorper libero. Aliquam malesuada, mauris a commodo dapibus, leo dui volutpat enim, a elementum nulla dolor eu lacus. Sed venenatis leo nec rutrum tempor. Integer quis rutrum purus,
rhoncus fringilla odio.</p>
<div class="imagecolumn">
<img />
<img /><br />
<img />
<img />
</div>
</div>
</div>
How to do it ?
Create a flexbox container :
<div class="flex-container">
</div>
.flex-container {
display: flex;
}
Set align-items: center (vertically centers both image and text container).
Remove
float: right;
padding-top: 125px;
Note: background colors are only here for the sake of seeing the boxes, you are free to remove it.
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You will need to remove the float and use a wrapper instead: https://jsfiddle.net/qhf8Lczg/1/
.mcnTextContent {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
.mcnTextContent {
position: relative;
left: 0px;
padding: 10px !important;
}
.mcnTextBlockOuter {
padding: 0px !important;
}
.mcnTextBlockInner {
padding: 0px !important;
background-color: white;
}
.positionr {
position: relative !important;
display: flex;
justify-content: space-between;
}
.textcolumn {
display: inline-block;
width: 370px;
height: auto !important;
border: 1px solid red;
}
.textcolumn h1 {
text-transform: uppercase;
color: black !important;
font-family: "Arial" !important;
font-weight: initial;
}
.textcolumn p {
font-family: "Arial" !important;
font-size: 14px !important;
color: black !important;
}
.imagecolumn {
display: inline-block;
border: 1px solid blue;
}
.imagecolumn img {
padding-left: 15px;
padding-top: 10px;
}
.img-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="positionr">
<div class="textcolumn">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, an doming bonorum pri, ferri oratio malorum pro et, per tritani phaedrum consulatu in. Vix ei persius assentior, omnes volumus pri id. Eos odio altera dictas no. Erat omnium nominati vix eu, sit et commune pertinacia. Id
laudem officiis referrentur vix.</p>
</div>
<div class="imagecolumn">
<div class="img-wrapper">
<img src="http://via.placeholder.com/50x50" />
<img src="http://via.placeholder.com/50x50" /><br />
<img src="http://via.placeholder.com/50x50" />
<img src="http://via.placeholder.com/50x50" />
</div>
</div>
</div>
You can just add flex on parent
.positionr {
display: flex;
align-items: center;
}
I have a problem. I want my page to be responsive but somehow when applying flex and changing resolution to lower, text from left column div is escaping from container. Instead it should push the parent div height. This is what happens:
<div class="container" id="ct-about-div">
<h2 id="ct-about-text1">Know about us</h2>
<div id="ct-rect"></div>
<span id="ct-about-text2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim</span>
<div id="diagonal">
<div class="col-md-offset-2 col-md-4" id="ct-about-col-left">
<h3>We are the best</h3>
<p>Consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
<p>Valutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrreit in volputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla fascilisi. Nam libre tempor cum</p>
<div>
<span>Read more</span>
</div>
</div>
<div class="col-md-6" id="ct-about-col-right"></div>
</div>
</div>
CSS:
#ct-about-div {
height: 100%;
width:100%;
border: 1px solid blue;
text-align: center;
#ct-about-text1{
font-size: 40px;
font-family: "Raleway";
color: grey;
font-weight: bold;
text-transform: uppercase;
}
#ct-rect{
background: grey;
height: 9px;
width: 90px;
margin: auto;
}
#ct-about-text2{
font-size: 18px;
font-family: "Raleway";
color: rgb(33, 33, 33);
text-align: center;
}
}
#diagonal{
display: flex;
text-align: left;
width: 100%;
height: 100%;
background: rgb(245, 245, 245);
border: 3px solid blue;
#ct-about-col-left{
width: 100%;
height: 500px;
border: 1px solid red;
h3{
font-size: 24px;
font-family: "Raleway";
color: black;
text-transform: uppercase;
line-height: 1.25;
}
p{
font-size: 16px;
font-family: "Raleway";
color: rgb(0, 0, 0);
line-height: 1.875;
}
div{
border: 3px solid;
span{
}
}
}
#ct-about-col-right{
height: 500px;
width: 100%;
border: 2px solid;
background-image: url(images/content/about/right-col-image2.png);
background-repeat: no-repeat;
background-size: cover;
}
}
Simply remove any height declarations and the boxes will auto scale in height
Specifically:
#ct-about-col-left{
width: 100%;
height: 500px;
Remove the 500px declaration here
Hi i have problem with positions of this tags
I have this code
<div class="wrap">
<div class="site-content">
<article class="col-sm-12 col-lg-8 article">
<div class="post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum tincidunt sodales. Fusce euismod viverra eros sit amet porttitor. Aenean purus neque, tempus quis diam in, scelerisque pellentesque leo. Suspendisse nec molestie erat. Duis faucibus, tellus eget pretium ullamcorper, turpis ante finibus mi, sed accumsan libero elit nec urna. Phasellus odio lectus, interdum eu vehicula a, malesuada vel tellus. Suspendisse sit amet ullamcorper nibh. Nullam fermentum mi sed malesuada ullamcorper. Etiam et lacinia elit. Mauris pellentesque nunc sapien, id ultricies magna venenatis non. Phasellus volutpat leo ac diam bibendum placerat. Vestibulum elementum, ex a tempor bibendum, nibh neque egestas enim, vel aliquet nisl turpis vel ligula. Sed sagittis dolor id metus ultrices tristique a nec nibh. Curabitur hendrerit rutrum dui, at placerat nisl rutrum ut. Duis vitae semper nunc, non aliquet sapien.
</p>
</div>
</article>
<aside class="col-sm-12 col-lg-4 aside-panel">
<h3 class="caption">Most read posts</h3>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside1.png" alt="">
</a>
</div>
<span class="post-info">28. November 2014</span>
<span class="separator">//</span>
<span class="post-info">Iphone</span>
<a class="top-post-title" href="#">Etiam lorem orci hendrerit ac neque id interdum fringilla metus</a>
</div>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside3.jpg" alt="">
</a>
</div>
<span class="post-info">28. October 2014</span>
<span class="separator">//</span>
<span class="post-info">Huawei</span>
<a class="top-post-title" href="#">Pellentesque tincidunt consequat nibh at vestibulum</a>
</div>
</aside>
</div><!-- end of .site-content -->
</div><!-- end of .wrap -->
problem is: my wrap have height:0px but why? i have my content in wrap... and second problem is: why text after tag is not under all of my content?
Here is my CSS:
html{
height: 100%;
}
/* Blocks */
div.container{
padding: 0;
width:100%;
}
/* Post */
article.article{
position: static;
font-size: 16px;
line-height: 28px;
float: left;
}
article.article p{
text-align: justify;
margin-bottom: 28px;
}
.aside-panel{
position: static;
}
.post-intro{
position: absolute;
color:#fff;
bottom: 0;
left: 0;
width: 100%;
}
.post-content:after, .post-content:before{
content: " ";
display: table;
}
.info{
font-size: 17px;
font-style: italic;
width: 100%;
color: #eee;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.info-left{
left:0;
float: left;
}
.info-right{
right:0;
float: right;
}
.perex{
font-size: 20px;
margin: 10px 0 30px 0;
font-style: italic;
}
.intro-image{
min-width: 100%;
width: 100%;
height: 550px;
max-width: 1000px;
background-repeat: no-repeat;
background-position: center;
}
.overlay{/* Image overlay */
position: relative;
height: 100%;
background-color: rgba(32,32,32,.7);
}
.search{
position: absolute;
width: 300px;
margin:80px 0 10px 0;
right: 0;
}
.search .searchbox{
width: 255px;
background: transparent;
font-size: 22px;
padding: 0 25px;
color: #fff;
font-weight: bold;
outline: none;
border: 1px solid rgba(238,238,238,.3);
height: 45px;
}
.search .submit{
width:45px;
height: 45px;
border: 0;
border: 1px solid rgba(238,238,238,.3);
border-left: 0;
float: right;
background: transparent;
color: #a9a9a9;
font-size: 22px;
}
.searchbox:focus{
border: 1px solid #fff;
}
.searchbox:focus ~ .submit{
border: 1px solid #fff;
border-left: 0;
color: #fff;
}
.focused{
border: 1px solid #fff;
}
.fieldset-default{
border: 1px solid #c0c0c0;
}
/* Change color of placeholder when input is focused */
.searchbox:focus::-webkit-input-placeholder {color: #fff;}
.searchbox:focus:-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus::-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus:-ms-input-placeholder {color:#fff;}
.post-brand{
/*change for bigger logo */
position: absolute;
width: 350px;
margin:80px 0 10px 0;
color:#fff;
left:0;
line-height: 45px;
font-size: 40px;
}
.search fieldset{
padding: 0;
}
/* Navigate bar/box */
.box{
height: 50px;
width: 100%;
background-color: rgb(0,0,0);
}
.no-format{
text-decoration: none;
color: inherit;
}
.no-format:hover{
text-decoration: none;
color: inherit;
}
.box.box-top{
top:0;
}
.box .logo{
color:white;
font-family: 'Lobster', cursive;
font-size: 32px;
float: left;
}
.box .spacer{
width: 1px;
height:30px;
margin: 10px 30px;
background: white;
float:left;
}
/* Default definition of box item */
.box-item{
padding: 0 15px;
color:#919090;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
z-index: 999;
}
.box-item:hover{
padding: 0 15px;
color:#fff;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
text-decoration: none;
}
/* Aside with top articles */
.top-post{
margin-bottom: 20px;
}
.top-post-image{
margin-bottom: 5px;
height: 170px;
overflow: hidden;
}
.top-post-image img{
width: 100%;
height: auto;
}
.post-info{
color: #888787;
font-size: 13px;
}
.separator{
color: #888787;
font-size: 13px;
font-style: italic;
}
.horizontal-divider{
border-bottom: 1px solid #626262;
border-top: 1px solid #626262;
height: 4px;
}
.top-post-title{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
font-size: 19px;
}
.top-post-title:hover{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
}
/* Wrappers */
.wrap{
position: relative;
width:100%;
margin:auto;
max-width: 1100px;
}
.box .wrap{
height: 50px;
}
.site-content{
position: absolute;
height: auto;
}
Here you have my complete code: HERE
Look at text after comment
Its because you have positioned .site-content absolutely. Position it relatively.
.site-content{
position: relative;
height: auto;
}
Updated Fiddle
Make the following correction:
Remove position:absolute from .site-content
Add overflow:hidden to .wrap
I have tested it. Let me know if you have any further doubts or queries.
my sugestion is:
.site-content{
position:relative;
min-height:100%;
overflow:hidden;}
i use it and this work for me.
you can view the problem here
so i lovingly build my humble little site, I have a div with content, nested snugly within my content div are two paragraphs and a header. I decide to float an image to the right within my content div expecting the paragraph to wrap around it, it happens as expected BUT it creates a phantom margin between my header banner and my content div, i search and search and search and search for the offending code until i can stand it no more! and decide to put my SOS in a bottle and launch it towards stackoverflow, please help me or I may end up on suicide watch within 24-48hrs.
here is the html and code, please dont laugh i am a noob and have only been learning css and html for about three weeks:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"/>
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (max-width: 768px)"/>
<link href="media.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 200px) and (max-width: 479px)"/>
<title>MSK Chess</title>
</head>
<body>
<div id="banner">
<h1>MSK Chess</h1>
</div>
<div id="container">
<div id="container2">
<div id="navigation">
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
</ul>
</div>
<div id="more"> <!--right column-->
<h3>Chess goodies</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
<img src="chessjam.jpg">
</div>
<div id="content"><!--left column-->
<div class="right"><img src="image.gif" alt="" width="100" height="100"><br>Chess blah</div><p>
<h2>Chess is Awesome</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div id="cleardiv"></div>
</div>
</div>
<div id="footer">
<ul>
<li>Footer item 1</li>
<li>Footer item 2</li>
<li>Footer item 3</li>
<li>Copyright © mirsultankhan.com</li>
<li><img src="vcss.gif"></li>
</ul>
</div>
</body>
body
{
margin: 0;
padding: 0;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div.right{
float:right;
margin: 0 0 5px 5px;
border: 1px solid #666;
padding: 10px;
width:102px;
background-color: #ddd;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}
div.right img{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
div#container
{margin:0;
background-image: url(nav_col_base.jpg);
background-repeat: repeat-y;
}
div#container2
{margin:0;
background-image: url(more_col_base.jpg);
background-repeat: repeat-y;
background-position: right;
}
div#navigation
{
float: left;
width: 150px;
padding-top: 2em;
}
div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
div#navigation ul li { margin-top: 4px; }
#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-image: url(nav_base.jpg);
background-repeat: repeat-y;
}
#navigation ul li a:hover
{
color: #fff;
background-color: #ccc;
background-image: url(nav_base2.jpg);
background-repeat: repeat-y;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 2em 10px 0 0;
color: #fff;
}
div#more h3
{
margin-top: 0;
color: #fff;
padding: .2em;
background-image: url(more_base.jpg);
background-position: right;
background-repeat: repeat-y;
}
div#content
{
margin-left: 190px;
margin-right: 200px;
}
div#content h2
{
font-size: 2em;
color: #036;
margin: 0;
font-weight: normal;
}
div#content { line-height: 150%; }
#cleardiv
{
clear: both;
height: 1em;
}
div#footer
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: center;
background-color:#E0E0E0;
height: 80px;
}
div#footer ul
{
padding: 0;
margin-top: 10px;
list-style-type: none;
}
div#footer li
{
display: inline;
margin-right: 1em;
background-size: cover;
padding:3px 5px 3px 5px;
}
div#footer a{
padding: 3px;
text-decoration: none;
color: #036;
}
div#footer ul li a:hover
{
color: #000;
background-color: #ccc;
}
Many thanks for taking the time - kind regards Robbie
You have an empty <p> tag before your <h2>Chess is Awesome</h2> tag. That paragraph has a default top margin, which collapses into the zero margin of its parent, the <div id="content"> element, effectively applying that margin to the <div id="content"> itself, moving it away from the banner.
I assume that empty paragraph is there in order to offset the <h2> from the top of the <div id="content">. You can replace the empty paragraph with a <br> tag for the same purpose, or you can give the <div id="content"> a padding: 1px style in order to separate its margin from the <p> margin, avoiding their collapse.
There is an unnecessary <p> tag at the end of the following line (line # 31) in your html:
<div class="right"><img src="image.gif" alt="" width="100" height="100"><br>Chess blah</div><p>
Remove it and you should be fine.
I'm trying to line up text and an image below a title acting as a header, but the image keeps throwing off the divider between entries and messing up the page's alignment. Here's what it looks like (Django templates in use here)
Here's the code:
<script src="/static/js/downloadEntry.js" type="text/javascript"></script>
{% for entry in entries %}
<div class="entry">
<label class="titleText">{{ entry.title }}</label>
<div class="contentContainer">
{% if entry.image %}
<img class="image" src="{{ entry.image.url }}">
{% endif %}
<p class="contentText">{{ entry.content }}</p>
</div>
<script>styleTitle("{{ entry.title }}");</script>
</div>
<hr class="entryDivider">
{% endfor %}
The relevant CSS:
.entryDivider {
margin-top: 10px;
size: 1px;
width: 66%;
}
.entry {
width: 66%;
margin-top: 30px;
margin-bottom: 10px;
}
.titleText {
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;
color: #666666;
text-align: left;
font-style: normal;
text-transform: uppercase;
display: block;
margin-bottom: 15px;
}
.contentContainer {
width:100%;
display: block;
}
.contentText {
font-family: "Helvetica Neue";
font-size: 14px;
text-align: left;
font-weight: 200;
display: block;
overflow: hidden;
}
.image {
float: left;
display: block;
background-color: #ff0000;
margin-right: 15px;
width: 90px;
height: 80px;
}
I've tried a couple of different techniques to no avail. Ideally it looks something like this:
http://jsfiddle.net/cSazm/5/, but within the div container. Something like:
[Title]
[Image, if one exists] [Content]
[Divider]
Here's a screenshot of how this is rendered:
Any suggestions? I don't have much experience with frontend work (which is probably apparent)
Is this what you are looking for?
.content {
width: 100%;
}
.image {
float: left;
padding-right: 5px;
}
.entryDivider {
margin-top: 10px;
size: 1px;
width: 66%;
}
http://jsfiddle.net/XZ2Ax/
Just put everything in a div above the divider.
In your containing div (in this case .entry), you can clear it:
.entry {
width: 66%;
margin-top: 30px;
margin-bottom: 10px;
clear: both;
}
However, I recommend using something known as a clearfix:
.entry::after {
content: '';
display: table;
clear: both;
}
This way, anything after the .entry will be cleared automatically.
As a side note, I recommend removing the hr elements and using border-bottom on the .entry.
See jsFiddle.
Is this what you are looking to do? JSFiddle
div{
display: block;
width: 100%;
overflow: hidden;
padding:10px 10px 0;
}
h2 {
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
}
img{
float:left;
margin-right: 10px;
vertical-align:top;
}
p{
display: block;
overflow: hidden;
}
div hr {
clear: both;
border: none;
padding-top: 5px;
margin:0;
border-bottom: 1px solid #ccc;
}
after floated elements you should have a clearing element so that the floats dont "mix"
CSS
.clearfix {
clear:both;
height:0px;
}
HTML
<div>
<img src="http://lorempixel.com/g/80/80/" />
<p>
Lorem ipsum dolor sit amet,
</p>
</div>
<br class="clearfix" />
<div>
<img src="http://lorempixel.com/g/80/80/" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
JSFiddle