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>
Related
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
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.).
I have a quick question, when I try to style my image in this example, the text doesn't go down in its own line? How can I do that without adding many br's, is there a easier way to do this? I DO NOT WANT TO EDIT ON THE IMAGE STYLE (thats the whole point of this question)
JS Fiddle link: https://jsfiddle.net/3vy8p6fx/
How do I get the "Staff" to be its own line?
<strong>History</strong><br />
<br />
<strong>Mission</strong><br />
<br />
<strong>Leadership</strong>
<div class="image123">
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vujic-150x150.jpg">
</img>
</a>
<p align="center">
Jasmina Vujic
<br>Principal Investigator
</p>
</div>
<div class="imgContainer">
<a href="http://www.nuc.berkeley.edu/karl-van-bibber">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/KarlVan-Resized-150x150.jpg">
</img>
</a>
<p align="center">
Karl Van Bibber
<br>Executive Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Bradley_M_Sherrill-150x150.png">
</img>
</a>
<p align="center">
Bradley Sherill
<br>Deputy Exec Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vetter-150x150.jpg">
</img>
</a>
<p align="center">
Kai Vetter
<br>NNSA Liaison
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://npwg.berkeley.edu/wp-content/uploads/2014/05/Leadership-Bethany-Goldblum.png">
</img>
</a>
<p align="center">
Bethany Goldblum
<br>Associate Director
</p>
</div>
</div>
<br>
<b>Staff:</b>
css:
.imgContainer
{
float: left;
}
In your fiddle, simply adding the following will resolve your issue:
.image123 { overflow: auto }
That being said, I would refactor this a bit to use something like flexbox. I took the liberty to rework your fiddle a bit to reflect better semantics, and more organized styling.
Fiddle: https://jsfiddle.net/3vy8p6fx/3/
The following material was in response to the original code provided by the OP.
This is because the image is positioned absolutely to the viewport, thus removed from the flow of the layout, overlapping the paragraph. Also, the image element is self-closing, thus </img> is not needed.
Furthermore, paragraphs are already block elements. So your inline styles are not needed. Remove all styles, and you'll have the effect you're desiring.
<!DOCTYPE html>
<head></head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
If you must have the image positioned absolutely, at the top of the document, you can give the <body> itself some additional padding to push the contents (the <p> in this case) down further:
<!DOCTYPE html>
<head>
<style>
body {
padding-top: 150px;
}
img {
top: 0; left: 0;
position: absolute;
width: 100px; height: 140px;
}
</style>
</head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
just change your
.imgContainer
{
float: left;
}
TO
.imgContainer
{
display: inline-block;
}
DEMO:
https://jsfiddle.net/3vy8p6fx/2/
NOTICE:
i changed some html syntax too, like:
instead of <img ...></img> i do <img ... />
break tags <br> to <br/>
...etc. look to my DEMO!
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }