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.
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
Ok guys I have styled this very well, but there are a few quirks! I have tried everything and it looks great/good as a responsive site, but there are some issues. I cannot get the .therapy section to look the way I want it to. Full page it hugs the left margin, but looks good with my media queries. My question is how do i get it to look good on full page and be responsive as well. Thanks and hugs. I would like the margins to come in a few px and look like it is not using all the white space available. please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="something.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{
background-color: #f1f0d1;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 1.125em;
overflow: auto;
}
h1, h2, h3{
text-align: center;
padding-left: 5%;
color: #878e63;
}
p{
padding: 2%;
color: #878e63;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%;
background-color: #fefbe8;
border: 1px solid #878e63;
border-radius: 2px;
box-shadow: 0 0 10px 0px;
overflow: hidden;
}
#callout {
width: 100%;
height: auto;
background-color: #878e63;
overflow: hidden;
}
#callout p {
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #f1f0d1;
}
#callout p a {
color: #f1f0d1;
text-decoration: none;
}
header {
width: 96%
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 90px;
}
nav ul li {
float: left;
border: 1px solid #878e63;
width: 15%;
}
nav ul li a {
background-color: #f1f0d1;
display: block;
padding: 5% 12%;
font-weight: bold;
font-size: 18px;
color: #878e63;
text-decoration: none;
text-align: center;
}
nav ul li a:hover, nav ul li.active a {
background-color: #878e63;
color: #f1f0d1;
}
.banner img {
width: 100%;
border-top: 1px solid #878e63;
border-bottom: 1px solid #878e63;
}
.clearfix{
clear: both;
}
.left-col {
width: 55%;
float: left;
margin: 1% 1% 1%;
}
.sidebar: {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.therapy {
/*float: left;*/
margin: 0 auto;
width: 100%;
height: auto;
/*padding: 1%;*/
}
.section{
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
footer{
background-color: #878e63;
width: 100%;
overflow: hidden;
}
footer p, footer h3 {
color: #f1f0d1;
}
footer p a {
color: #f1f0d1;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img {
height: 50px;
}
#media screen and (max-width: 480px) {
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav {
width: 100%;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li {
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878e63;
border-right: 0px solid #878e63;
border-bottom: 1px solid #878e63;
border-left: 0px solid #878e63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col, .sidebar, .section {
width: 100%;
float: left;
margin: 0;
}
}
</style>
</head>
<!-- redo all images on the page and style with css3-->
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <strong>727-555-5555</strong></p>
</div><!--end callout div-->
<header>
<!--need ne image--><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?">
</header>
<nav>
<ul>
<li class="active">Home</li>
<!--make active later--><li>Contact</li>
<!--make active later--><li>Pricing</li>
<!--make active later--><li>Specials</li>
<!--make active later--><li>Consult</li>
<!--make active later--><li>Consult</li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="banner">
<img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new">
</div><!--close banner-->
<!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center>
<section class="left-col">
<!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p>
<p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p>
</section>
<aside class="sidebar">
<div class="therapy">
<img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new">
</div><!--close therapy div-->
</aside>
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center>
<footer>
<div class="section">
<p>Text Text Text</p>
<p><strong>727-555-5555</strong><br>
123 Main St<br>
Anywhere, FL 33770<br>
blank#blahblah.com</p>
</div>
<div class="section">
<p>Connect with us!</p>
<ul>
<li><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></li>
</ul>
</div>
<div class="section">
<img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new">
</div>
</footer>
</div><!--end wrapper div-->
<p>© 2014.</p><!--margin 0 auto this-->
</body>
</html>
I know it is a lot, but I am stuck, I think my math is off. Please advise me how I can resolve and thank you.
I found a typo (an unecessary colon):
.sidebar: { /*here*/
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
If you want to improve the use of white space, you need to make a concept at first. For example your text is currently above a huge image. Unter this huge image there are three smaller boxes.
So you could say in full screen you want the image and text next to each other. This is done by adding the following to the media query you want the text and image to appear next to each other:
aside.sidebar {
width: 40%;
float: right;
margin-right: 2%;
margin-top: 30px;
}
Then you need to insert
<div style="clear: both;"></div>
Below the closing </aside> tag! You have inserted something like this for your sidebar in line 106 with .sidebar:, which is a "broken code" because of the : after your css class.
This is a quite simple example, but works for all kinds of pages. If you need further explanations feel free to ask, this is a "quick help" copy & paste solution.
Best regards,
Marian.
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
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%;
}