I can force this layout with a table, but I think the best practice may be some display/float settings in CSS. I have a header and menu section that are working as desired. Below them are top, middle, and bottom sections that are wrapping ugly. The top section should have an image followed by a block of text. The middle section should have 3 equal blocks of text. The bottom (footer) should have 1 equal block of text. Is there a clean way to do this without stuffing it into a table? Here's what I'm doing so far and as I say it's ugly:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<header>
<span class="HeaderTitle">My header info</span>
</header>
<nav>
<!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
<div class="jumbotron">
<img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Here's one way. You just need to clear your floats, basically. Here's some reading on CSS Floats:
All About Floats
CSS Floats 101
Mysteries of the Float Property
* {
box-sizing: border-box;
}
.jumbotron img {
border: solid 1px black;
margin-right: 14px;
}
#MiddleSection {
clear: left;
margin: 0px auto;
}
.MyArticle {
width: 33%;
display: inline-block;
text-align: center;
background: grey;
}
footer {
clear: left;
text-align: center;
}
<header>
<span class="HeaderTitle">My header info</span>
</header>
<main>
<div class="jumbotron">
<img src="/Images/Photo.jpg" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
Though most people don't usually make content on their websites full-width (expand the Snippet to full screen to see what I mean).
Another way that's better/simpler for modern browsers is to use the Flexbox method (not really an option if you have to support IE8 or IE9, etc.).
Related
I am trying to set my 2 column layout on my webpage, if I insert a picture in it messes up my foot but if I remove it, the footer looks correct.
HTML without image
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<a name="top"></a>
<nav class="nav">
<div class="menu">
Home
</div>
<div class="menu">
Full Menu
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h2>Please take a look at our available coupons in the list below.</h2>
<div class="bulletPoints">
<ul>
<li>Buy one burger, get one FREE</li>
<li>30% off one dessert item</li>
</ul>
</div>
<br/>
</div>
<div class="twocolumns">
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p>manager#superrestraunt.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
</div>
</footer>
<div class="copyright">
<h2>#copyright: Landon Byrd</h2>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
Back to top of page
</body>
</html>
HTML with image
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<a name="top"></a>
<nav class="nav">
<div class="menu">
Home
</div>
<div class="menu">
Full Menu
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h2>Please take a look at our available coupons in the list below.</h2>
<div class="bulletPoints">
<ul>
<li>Buy one burger, get one FREE</li>
<li>30% off one dessert item</li>
</ul>
</div>
<br/>
</div>
<div class="twocolumns">
<img class="img1" src="images/burger.jpg" alt="burger">
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p>manager#superrestraunt.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
</div>
</footer>
<div class="copyright">
<h2>#copyright: Landon Byrd</h2>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
Back to top of page
</body>
</html>
CSS
/*
Landon Byrd
Fall 2021
Light Blue #06aed5
Darker Blue #086788
Cream White #f2f4f3
Yellow #f0c808
Rich Red #dd1c1a
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}
/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}
.name{font-weight: bold; color: #f0c808}
.twocolumns{}
.img1 {float:left; width: 400px; height: 175px; margin:15px}
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #06aed5; color: #086788; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}
/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; }
Pictures
Also how would I go about getting rid of the white space between the copyright section and the footer> Thanks in advance.
/*
Landon Byrd
Fall 2021
Light Blue #06aed5
Darker Blue #086788
Cream White #f2f4f3
Yellow #f0c808
Rich Red #dd1c1a
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}
/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}
.name{font-weight: bold; color: #f0c808}
.twocolumns{display:flex;}
.img1 { width: 400px; height: 175px; margin:15px}
/* Footer Section */
*{box-sizing: border-box;}
.footer{
text-align: center;
background-color: #06aed5;
color: #086788;
display: flex;
justify-content: space-between; }
.box{ width: 33.33%;}
.footer::after{}
/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; margin-top:-19px; }
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<a name="top"></a>
<nav class="nav">
<div class="menu">
Home
</div>
<div class="menu">
Full Menu
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h2>Please take a look at our available coupons in the list below.</h2>
<div class="bulletPoints">
<ul>
<li>Buy one burger, get one FREE</li>
<li>30% off one dessert item</li>
</ul>
</div>
<br/>
</div>
<div class="twocolumns">
<img class="img1" src="images/burger.jpg" alt="burger">
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p>manager#superrestraunt.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
</div>
</footer>
<div class="copyright">
<h2>#copyright: Landon Byrd</h2>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
Back to top of page
</body>
</html>
I would like to render HTML to PDF. To get this working, I make use of Browsershot, which uses a headless Chrome to render the HTML and CSS.
This is my additional style to fit A4-format:
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<!-- Styles -->
<link href="{{ asset(('/css/app.css')) }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<style>
#page {
size: A4;
margin: 11mm 17mm 6mm 17mm;
}
#media print {
#footer {
position: fixed;
bottom: 0;
}
.unbreak-element {
page-break-inside: avoid;
page-break-after: avoid;
}
/* html, body {
height: 297mm;
}*/
}
</style>
</head>
This is my footer, which is included:
<div class="grid grid-cols-3" id="footer">
<address class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</address>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
</div>
My problem is: Very large elements are now overlapping the footer-section like this:
My question: How can I avoid overlapping and break the table to the next page?
There is an answer that answers a similar question that references an article that might help you along.
The gist of it is that you need tables to get space reserved at to bottom for a fixed footer:
.main-footer .inner {
bottom: 0;
position: fixed;
}
<table>
<tbody>
<tr>
<td>
<header>
<h1>Page Title</h1>
</header>
<p>Lorem ipsum...</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<footer class="main-footer">
<div class="inner">
<small>© YEAR AUTHOR</small>
</div>
</footer>
</td>
</tr>
</tfoot>
</table>
This is not ideal since these are not semantic tables. I managed to get CSS tables to work in firefox like so:
body {
display: table;
}
.main-header,
.main-body {
display: table-row-group;
}
.main-footer {
display: table-footer-group;
}
<header class="main-header">
<h1>Page Title</h1>
</header>
<div class="main-body">
<p>Lorem ipsum...</p>
</div>
<footer class="main-footer">
<small>© YEAR AUTHOR</small>
</footer>
However once I tried to fix the footer to the bottom position with
<footer class="main-footer">
<div class="inner">
<!-- footer content -->
</div>
</div>
.main-footer {
display: table-footer-group;
}
.main-footer::after {
content: "";
display: block;
height: 2em;
}
.main-footer .inner {
bottom: 0;
display: block;
position: fixed;
}
...firefox the footer is painted twice (with a slight offset). I believe this is a browser bug.
All the while CSS tables won’t work in chrome at all (I also believe this is a bug).
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have some simple html and css styling and I am creating a site with articles and pictures. I don't understand why my third picture isn't aligned with the other photos. It's slightly higher, though it seems like the same size. How can I get it to to be aligned properly? I don't believe I'm doing anything differently with my third article/picture, so I don't understand why it looks different.
index.html
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(dog.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(chocolate.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(cat.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
There's a few issues going on here, like duplicating an ID. That being said, you can get what you want by adjusting the width and using vertical-align: top;
Fiddle here: https://jsfiddle.net/harcfs0u/40/
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(dog.jpg)"></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(chocolate.jpg)"></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(cat.jpg)"></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br /><br />
<center>©2017<br />
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif;
font-weight: 300 !important;
margin-bottom: 0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
.top-stories {
vertical-align: top;
}
section {
padding: 0;
margin: 0;
max-width: 32%;
display: inline-block;
}
article {}
.article-image {
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
In the section class of CSS file, Try using display property with inline-flex. I am attaching you stackblitz link here.
https://stackblitz.com/edit/js-c9mqfu
section {
max-width: 33%;
display: inline-flex;
}
The reason is that the vertical alignment of inline-blocks is by default at their baseline, which in this case is the last line of your text. To fix that, add vertical-align: top to the CSS for section:
section {
max-width: 33%;
display: inline-block;
vertical-align: top;
}
(And as I wrote in the comments, don't use an ID more than once - use a class instead)
u can know the differ between grid and flex in this link differ between flex and grid
section {
max-width: 33%;
display: inline-flex; // or used display: inline-grid;
}
I just removed extra text in 3rd image p and then your code worked fine
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://upload.wikimedia.org/wikipedia/commons/7/70/Chocolate_%28blue_background%29.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location ... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.
That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.
#content {
font-size: 16px;
display: inline-block;
margin-left: 30px;
font-family: "Times New Roman", Times;
text-align: center;
background-color: #1A1A1A;
margin: 30px;
width: 730px;
color: #F1F1F1;
float: right;
}
header {
margin: 0 auto;
color: #F1F1F1;
}
#titel {
float: right;
font-size: 70px;
font-family: 'Stalemate', cursive;
padding: 48px;
}
.box {
width: 1000px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Page </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="box">
<header>
<img src="#/#.png" alt="#">
<div id="titel">Page</div>
</header>
<aside>
<nav>
<ul>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
</ul>
</nav>
</aside>
<div id="content">
<h1>Title</h1>
<p>Text.</p>
<h2>Title</h2>
<div id="img-wrapper">
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
<div>
</div>
</div>
</div>
</div>
</div>
<footer>©Text</footer>
</body>
</html>
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>