Probably a simple question, but what's the best way to use a div to logically break up a page, vertically, regardless of how the items above and below it are floated or positioned. For viewing on the web, not page break in terms of printing.
I am trying something like this but it is not working:
<div id="top block" style="width: margin-left: auto; margin-right: auto; clear: both">
<div id="left" style="float: left; width: 200px">
<p>Text text text</p>
</div>
<div id="center" style="float: left; width: 500px;">
Image
</div>
<div id="right" style="float: left; width: 200px">
<p>Text text text</p>
</div>
</div> <!--End of top block-->
<div id="page break" style="width: 1000px; clear: both;"></div> <!--I want this to be a hard break where everything after it appears below-->
<div id="bottom block" style="text-align: center">
<p>Text text text</p> <!--Things from this paragraph are popping up above the forced page break depending on how I align things.-->
</div>
i do not encounter your problem. By the way you dont need to specify a width to your "break" div, you can try with:
<div id="page break" style="clear: both; display:block;"></div>
here is a Fiddle where i colored the div to let you see better his behavior.
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
This is a follow up from this question: Autofit text under image with only css
Why does the inline-block divs in this code produce extra width on the right side of the elements?
.item {
display: inline-block;
background-color: red;
}
.image-container {
background-color: blue;
display: table;
width: 1%;
}
img {
height: 120px;
}
.text-wrapper {
overflow: hidden;
}
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
Edit: This is NOT a problem with whitespace, see this jsfiddle without any whitespace and notice that the div still takes up lots of extra space (the red area): https://jsfiddle.net/2Lzo9vfc/332/
Edit2: To clarify my requirements: I have N images with varying width that I wish to layout in a "dynamic table", i.e. the images should be inline so they will automatically wrap when running out of horizontal space in parent. Where this gets tricky is that I have some text that I wish to display under each image that should wrap with the image width as well (and as I said, the image width may vary).
The red portion of the item is an artifact of the browser not knowing how to correctly size the containers. It's using the length of the text to determine the width before the table layout is applied. If you know the width of the items, you can use this simpler approach:
.item {
display: inline-block;
background-color: blue;
width: 120px;
}
.image {
display: block;
height: 120px;
}
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
I don't know off hand of a way to make the elements shrink to the smallest possible width while still containing all child elements.
I modified #Brandon Gano's second answer. I used display: table-caption; on .text-wrapper.
Here's the CSS I modified from his jsfiddle:
.text-wrapper {
overflow: hidden;
display: table-caption;
caption-side: bottom;
height: 60px; /* You may have to modify the height */
background-color: blue;
}
And the updated jsfiddle.
You're seeing whitespace added between the inline-block elements. You can remove the horizontal space between these items by removing all whitespace between the elements. e.g.:
<div>
...
</div><div>
...
</div><div>
...
</div>
Note that the closing tag is immediately followed by the next opening tag.
I cannot seem to get these Google map divs to sit side by side. It was working fine until I decided to restructure it.
It consists of 4 divs, one above the other on the left and one above the other on the right. The two on the left are in their own container and the two on the right are in a container. Those two containers then sit side by side inside a bigger container.
It is all about being able to turn on and off the display of the individual sides (map vs pano) including the lat/long readout that sits above each map.
This is the earlier version that was working fine but was messy. To turn off the streetview pano for example I would have had to turn off two divs.
<div style="float:left; width: 512px;">
<table>
<tr><td><b>Lat/Lng:</b></td><td id="mappos">-33.1234,150.1234</td></tr>
</table>
</div>
<div style="float:left;">
<table>
<tr><td><b>Lat/Lng:</b></td><td id="svpos">-33.12345,150.12345</td>
<td><b>Hdg:</b></td><td id="hdg">90</td></tr>
</table>
</div>
<div style="clear:both;"></div>
<div style="width: 1024px; height: 512px">
<div id="map" style="float:left; width: 50%; height: 512px;"></div>
<div id="pano" style="float:left; width: 50%; height: 512px;"></div>
</div>
This is the new neater code that would supposedly allow easier switching on and off of each side but it does not work. The two pairs of divs sit on top of each other instead of side by side. It is no doubt an obvious error but I cannot spot it. I have looked at numerous other posts about side-by-side divs but cannot see what I am doing wrong.
Originally I had the left and right container divs specified with width 512px but when I tried to expand them to 1024px via Javascript it did not work. I therefore used 50%. When I change that to 100% followed by map resize it expands fine.
<div style="clear:both; width: 1024px;">
<div id="mapdiv" style="float:left; width: 50%"></div>
<div style="width: 512px;">
Lat/Lng: <span id="mappos">-33.1234,150.1234</span>
</div>
<div id="map" style="width: 512px; height: 512px;">
</div>
</div>
<div id="panodiv" style="float: left; width: 50%"></div>
<div style="width: 512px;">
Lat/Lng: <span id="svpos">-33.12345,150.12345</span> <span id="hdg">90</span>
</div>
<div id="pano" style="width: 512px; height: 512px;">
</div>
</div>
</div>
I thought it could be a padding issue. I tried increasing the width of the outer container to 1040 etc. but to no avail.
Here is a fiddle: http://jsfiddle.net/Lack10o0/
You just have to remove the unnecessary closing </div>s on line 2 and 9.
Edit : I updated your jsfiddle
You have too many closing tags. Take out the </div> after <div id="mapdiv" style="float:left; width: 50%"> and after <div id="panodiv" style="float:left; width: 50%">
Here is the corrected code:
<div style="clear:both; width: 1024px;">
<div id="mapdiv" style="float:left; width: 50%">
<div style="width: 512px;">
Lat/Lng: <span id="mappos">Top left div</span>
</div>
<div id="map" style="width: 512px; height: 512px;">Bottom left div
</div>
</div>
<div id="panodiv" style="float: left; width: 50%">
<div style="width: 512px;">
Lat/Lng: <span id="svpos">Top right div</span> <span id="hdg">90</span>
</div>
<div id="pano" style="width: 512px; height: 512px;">Bottom right div
</div>
</div>
</div>
Looks like you have a couple closing tags to many there. You have 7 opening divs and 9 closing divs. The faulty ones are probably the ones behind #mapdiv and #panodiv.
Right now I've got a webapp working, which I'm trying to add icons to, along with text to describe those icons. I'm trying to scale the icons down to fit in the div, which works great, but also to scale the image to hold text within the div. The issue I'm having is that although the image will scale to fit in the div, it won't scale enough to also allow text in the div.
My HTML code is
<div class="ui-grid-b" id="dashGrid">
<div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
</center>
</div>
<div class="ui-block-a" style="height:22%"></div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c" style="height:22%"></div>
<div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
</div>
, and the relevant CSS is
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
I've got a JSFiddle that shows the issue, http://jsfiddle.net/jDDmC/.
Ideally, the text, as well as the image, would both fit into the outlined boxes.
Any help would be appreciated!
A couple of things:
1) Remove the <center> tag since it's been deprecated. Use text-align: center in your css, instead.
2) Your divs have a specific height, and because of that, the text goes out of the box. So in the inline css, remove the height property.
3) Finally, consider using only an external stylesheet (instead of inline css), since it's easier to maintain and reuse.
Please take a look at:
http://jsfiddle.net/jDDmC/1/
Maybe you're looking for something like Fluid Images ?
<div style="background: green; float: right;">
<div style="background: yellow;">
<img style="float: left; width: 80px;" src="image.png" />
<div style="background: red; float: left;">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
</div>
</div>
The red div keeps displaying below the image. I want the width of the text in the paragraphs of the red div to dictate its width. I need to have the image and the red div side by side, but I don't want to provide the fixed width neither for the yellow nor for the red div. I need the automatic dynamic width of the yellow div to fit the image and the red div in one line.
Well... your code is working the way you want it. I just added more content in the paragraphs so that you can see that the red div expands to accommodate the content. The image is displayed side by side with the paragraphs.
<div style="background: green; float: right;">
<div style="background: yellow;">
<img style="float: left; width: 80px;" src="http://www.google.com/doodle4google/images/carousel-winner2012.jpg" />
<div style="background: red; float: left;">
<p>Text 1234567910</p>
<p>Text 23456789101111111</p>
<p>Text 3</p>
</div>
</div>
</div>
Here's a demo at JS Bin: http://jsbin.com/atozim/1
Just make sure you do not have any other CSS rules interfering with how your HTML structure is displayed.