I have code here. In this code, as it can be seen that there is a div tag with class image and text is appeared on the right side. As there is a lot of text and some of the text is visible on the right and some is below the image tag. I want this text to be appeared on the right side no matter how much text is there.
How can I achieve this?
<div class="image"></div>
<p class="text">adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare. adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.</p>
css
.image {
width: 100px;
height: 100px;
float: left;
border: 1px solid #999;
}
I think you just need to give your paragraph a margin-left based on the width of your image:
margin-left: 110px;
Demo: http://jsfiddle.net/Q7JhN/1/
Related
Background
I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.
Problem description
I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.
Problem Illustration
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
Questions
Why is it not working as expected?
Am I doing something wrong according to the W3C specs or is it a lack of browser support?
Are there any ways/tools to work this around?
I am creating a fiction ebook using plain html as the source files for the chapters of the book. I would like to keep the html as vanilla as possible and use CSS for the formatting. Most of the book just needs an indent for any paragraph following a paragraph and every <hr /> tag should display as a scene break, e.g. 3 * center-aligned.
This all works fine in JSFiddle and in chrome.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
visibility: hidden;
text-align: center;
overflow: visible;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
visibility: visible;
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
but when I copy this to the Amazon ebook preview app I need this extra redundant looking CSS for the ***'s to appear ?
p::after {
content: " "
}
Can anyone help identify why this might be needed in the ebook ? I don't want to have to tag a useless space on to the end of every paragraph to make this work. Thanks in advance.
I would avoid the visibility: visible vs. hidden combination in the hr and its pseudo element: You can simply apply border: none; to the hr to avoid the display of the horizontal line itself. This might also help with your other problem.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
text-align: center;
border: none;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
having problem with background image with css on Mac Os.
if we change the resolution of browser it turn to look bad.i need look like same in every resol and also on Mac os.
There is 2 section have bg image
using Mac os
http://i.imgur.com/UmGGBA4.jpg
using window os
https://i.imgur.com/QjXNxag.jpg
I want to look like window os image on MAC.
code
.section-about {
background: url("http://i.imgur.com/NlczAVu.jpg") top right/cover no-repeat;
min-height: 545px;
}
/* line 180, ../sass/screen.scss */
.section-experinece {
background: url("http://i.imgur.com/eAeB5ci.jpg") top right/cover no-repeat;
min-height: 1130px;
}
h1 {
margin: 0;
}
.one {
color: #fff;
margin: 0;
}
p {
margin: 0;
}
<section id="about" class="section-about">
<h1>section1</h1>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
<section id="experinece" class="experinece-sec section-experinece">
<h1>section2</h1>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
thanks.
It looks like your problem is not the OS you are on, but the screen resolution you are viewing on.
Check the page on a windows machine and make the view as wide as you can.
Basically:
I have a wrapper div that is 100% width and height.
Inside it is another div that is absolutely positioned and must follow the window height (with a little bit of margin at the bottom).
Inside this div is a ul list that will be always as high as the parent div. If it gets higher, it will become scrollable.
This is what I'd like to achieve:
.wrapper-location {
position: relative;
height: 100vh;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
http://codepen.io/aguerrero/pen/ygrwPr
I've been pulling my hair and can't seem to make it work.
Is this what you are looking for. It can be done by adding height 100% to .wrapper-loctaion and height 90% to .box locator (add height 100% to html,body too). Now set top and bottom to 5% for .box-locator to center it vertically.
html,
body {
height: 100%;
}
.wrapper-location {
position: relative;
height: 100%;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 5%;
bottom: 5%;
width: 360px;
height: 90%;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
Add margin-bottom:50px i.e, equal to top:50px
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
margin-bottom: 50px; //new property
}
here is the fiddle.
I can't lose responsive functionality as my issue goes a bit deeper.
If there are some questions, please do not hesitate to ask. Thank you in advance.
<div class="container">
<div class="row">
<div class="col-md-6 yellow">
<div class="col-md-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam</p>
<img class="col-md-12" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfVm23Mm3GiIQJJnnej43NG1JrrvpFVTqx1QaOGHXFneJPr9ow" />
</div>
</div>
<div class="col-md-6 orange">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam.</p>
</div>
</div>
</div>
</div>
Your question is abit confusing since you have the img included in the html, but if im understanding it correctly you will need to look into using javascript/jquery to calculate the height of each container and then compare them and then depending on which one is bigger insert the img into that. Below is a small bit of jquery to get you started.
$(document).ready(function() {
var a = $('.yellow').height();
var b = $('.orange').height();
if(a > b){
//do something here
}
else {
//do something else here
}
});