Ok so there seems to be a problem with this..I tried so many things, but I'm a noob at this so it's probably something so obvious I'm just missing it...
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#about {
min-height: 500px;
color: white;
padding: 40px 100px;
}
#about h1, p {
float: left;
}
#about img {
float: right;
}
<section id="about">
<div class="container">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet</p>
<img src="https://picsum.photos/250/250">
</div>
</section>
Only inline elements flow around floated elements, but both the h1 and p tags are block elements. You can change both of their displays to inline-block however a better solution would probably be just to put the img inside the p tag with the text itself (since text has inline styling by default and will naturally flow around your floated image).
.container {
width: 80%;
margin: auto;
}
#about {
min-height: 500px;
padding: 40px 100px;
}
#about img {
float: right;
}
<section id="about">
<div class="container">
<h1>About</h1>
<p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p>
</div>
</section>
I had the same problem. I was using Bootstrap 4 along with a local style.css file.
Try removing float: left; for "#about h1, p" selector, and see if it works. I didn't set the "display: inline-block;" declaration for h1 and p elements and it still worked.
here is my code:
.about p {
font-size: 25px;
min-width: 300px;
text-align: justify;
text-indent: 15px;
font-weight: bold;
}
.me {
height: 400px;
margin: 0 30px 10px 0;
box-shadow: 2px 5px 10px 0 hsla(240, 100%, 35%, 1);
}
<head>
<!-- link to Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section class="container bg-primary text-white about" id="about">
<img src="./images/me.JPG" alt="my picture" class="me rounded float-left"/>
<h1 class="font-weight-bold display-4">About Me...</h1>
<p>Hi there! My name is Mohsen, and I'm from Shiraz. I love to learn new things, and though I had just begun to learn about front-end web-development, I'm very
passionate about it.</p>
</section>
</body>
Related
i have 3 boxes and i need change height by content but height must change to up (Lower margin aligned). Here is image how it should look:
<style>
.wrapper{
width: 100%;
height: 30px;
}
.wrapper .point{
width: 12px;
height: 12px;
background: #979797;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
float: left;
margin-top: 3px;
}
.wrapper .text{
width: 130px;
float: left;
border-bottom: 2px solid #979797;
color: #979797;
font-size: 11px;
min-height: 20px;
text-align: center;
padding-bottom: 20px;
margin-top: -12px;
}
</style>
<div class="wrapper">
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Very long text. Lorem ipsum dolor sit amet</div>
<div class="point"></div>
</div>
How to do it? Thanks
try
height:auto,
width:100%
in your css
It's impossible with float:left (unless you know the exact height in advance and can set the margin-top according to it). But floats never were meant to do this type of layout anyways.
However, it can be easyly done with Flexbox:
.wrapper{
display: flex;
flex-flow: row wrap;
align-items: flex-end;
}
.wrapper .point{
width: 12px;
height: 12px;
background: #979797;
border-radius: 70px;
display: inline-block;
margin-top: 3px;
}
.wrapper .text{
width: 90px;
border-bottom: 2px solid #979797;
color: #979797;
font-size: 11px;
text-align: center;
padding: 20px;
background: #eee;
}
<div class="wrapper">
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Very long text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
<div class="point"></div>
</div>
Also, this can be done with inline-blocks, by setting vertical-align:bottom to their container. You can add this as a fallback to Flexbox solution (all you need for this is setting vertical-align:bottom to .wrapper and display:inline-block to points and texts). I'd not recommend to rely on inline-blocks only because they weren't meant to do the layout, like floats, and will need some sort of hacks to adjust the spaces between items, because they treat whitespace characters between tags as whitespace text characters. But as a fallback for non-Flexbox-supporting browsers (like IE10-) they would provide a decent experience (much better than nothing).
I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
I am trying to center two divs (#about and #testimonial-snippets) within the larger black div. How can I do this?
JS Fiddle: http://jsfiddle.net/DgtqM/
HTML
<footer>
<div id="footer-section">
<section id="about">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<p>Lorem ipsum dolor sit amet. Find him on Twitter and Instagram. <a id="slide-toggle" href="#">Contact</a> | Archive</p>
</section>
<section id="testimonial-snippets">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<div class="snippet">
<p>This is a testimonial.</p>
<a class="read-testimonial" href="/testimonials">read more</a>
</div>
</section>
</div>
</footer>
CSS
footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}
I allowed myself to reduce that problem to a minimum of markup. Everything else is not relevant to the question and only makes it harder to understand.
<footer>
<section id="about">About</section>
<section id="testimonial-snippets">Testimonial</section>
</footer>
One solution would be to make these sections inline-block elements and have them centered in the footer:
footer {
background: #222;
padding: 50px 0;
width: 100%;
text-align: center;
}
footer section {
width: 300px;
height: 50px;
display: inline-block;
text-align: left;
}
/* Just coloring the different divs */
#about { background: red; }
#testimonial-snippets { background: green; }
http://jsfiddle.net/DgtqM/6/
Wrap the elements within a new div. Then give the new div a fixed width and use margin: 0px auto for styling.
HTML
<div id="footer-section">
<div class="wrap">
<section id="about">
<!--Content -->
</section>
<section id="testimonial-snippets">
<!--Content-->
</section>
</div>
</div>
CSS
.wrap{
width: 620px;
margin: 0px auto;
overflow: auto;
}
Example http://jsfiddle.net/DgtqM/5/
I want to achieve this:
I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:
<div class='content'>
<div class='box'>
<a>test</a>
<div class='money'><div id='maxnumber'>
<h3 id='max'>max</h3><h3 id='digit'>0000</h3>
</div></div>
<div id='numbereuro'><h3 id='digit2'></h3>
<h3 id='euro'></h3>
</div>
</div>
<div class='utility'>test</div>
</div>
Here is a working example that shows the result without the smaller box: http://jsfiddle.net/
.box names the bigger box and .utility the smaller box below bot wrapped in .content. I use the following css:http://jsfiddle.net/76fXa/
.content {
margin: 5px;
padding: 5px;
font-size: 11px;
float: left;
}
.utility{
position:relative;
height:50px; width:100px; background:red;
}
.box {
margin: 5px;
padding: 5px;
background: #BBE3A8;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
position: relative;
padding: 5px;
width: 180px; height:auto;
cursor:pointer;
}
and I get the following result: http://jsfiddle.net/76fXa/1/
any ideas?
How about this quick fiddle I just made for you.
http://www.jsfiddle.net/ozzy/F3K8k/
Both .box and .utility should be put in another floated div so that they both are constrained within. Just a simplified example
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(attempting to preserve your class names where practical)
You could then set the inner divs to display block so that they fill the constrained area and set a fixed width to section (I will use 50% for demo purposes)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Set the other style properties as needed, and remember the box model when adjusting padding and margins. Sometimes applying too much or too little of either can break off to a newline if something is set wrong.
From what you provided I can't see why position relative would be necessary. If it was intended as an attempt to make the layout you demonstrated then I'd suggest removing it, unless for some reason you are absolutely positioning something within that div relative to it.
EDIT: Didn't realize you had two content divs and a fiddle posted.
http://jsfiddle.net/76fXa/2/
#ArtWorkAD: Is this is how you want it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.content {
float: left;
font-size: 11px;
margin: 5px;
padding: 5px;
}
.utility {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: red;
border-radius: 5px;
clear: left;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #BBE3A8;
border-radius: 5px;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<a>test</a>
<div class="money">
<div id="maxnumber">
<h3 id="max">max</h3><h3 id="digit">0000</h3>
</div>
</div>
<div id="numbereuro"><h3 id="digit2"></h3>
<h3 id="euro"></h3>
</div>
</div>
<div class="utility">test</div>
</div>
</body>
</html>
http://jsfiddle.net/9Ugww/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari