I have no idea why does this happen. The only way I could fix this is to put a load of breaks after the text, but obviously this is not an acceptable solution.
Isolated CSS:
.center_column {
max-width: 892px;
float: left;
}
.content {
width: 892px;
background-color: #FFF;
background-image: url("style/contentpost.png");
background-repeat: no-repeat;
border-style: solid;
border-width: 2px;
border-color: #7699bb;
border-radius: 10px;
}
.content_wrap {
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
}
.text {
width: 100%;
margin-top: 20px;
text-align: justify;
text-justify: distribute;
font-weight: normal;
font-size: 16px;
}
Isolated HTML:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
</div>
</div>
</div>
</div>
Why does this happen? Could anybody tell me how to fix that?
Thank you in advance :)
This will force the browser to calculate the height of a div containing float:
.text{
overflow: hidden;
}
Also, google for clearfix, if you don't want overflow:hidden for some reason.
float: left; is your problem ,
add :
<div class="clear"></div>
css:
.clear {
clear: both;
}
See you are not done with your entire layout yet. Try this layout and style..
<div class="center_column">
<div class="content">
<div class="content_wrap">
<img class="pic" />
<div class="text">TEXT</div>
</div >
</div>
<div class="footer" >FOOTER</div>
</div>
Add this to your existing styles
.pic {
float:left;
}
.footer {
clear: both;
}
FLOAT will actually float everything after it, adding CLEAR both, left or right, will clean floating problems. In other words, ends the floating effect.
It's because of your
float : left;
You need to add this
<div class="clear"></div>
below your image.
And add this to your css file
.clear { clear : both; }
You can use a fixed image width and height in CSS, or use background position and size property in CSS.
Add a <div> that clears the floating:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
Related
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I am working on a simple tool that display stats.
We want to display 2 panels, of the same height width small boxed inside, all of the same height.
My result is very close to what we want to produce, but the boxes has weird padding.
<div class="col-md-6 greybox">
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<h2>Title of the box</h2>
</div>
</div>
</div>
<div class="col-md-12 flex">
<div class="row flex">
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant</h3>
<p>lorem</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant data</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
The full script is availlable at http://codepen.io/joe_desmeules/pen/LRBKEp
We are using Bootstrap 3.7.
We are using Scss.
Im not interested using Jquery to fix the issue (we use Angular2)
The data will be dynamic. I can't use fixed height to fix the issue.
The provided codepen is a prototype, with placeholder color, i promise the result will have prettier colors :).
The weird padding is probably caused by the title of the box, but i dont know how to fix it.
Removing the title, and edit the CSS of the .greybox fix the issue
We need to keep the title in the final result.
Thank you for helping me, im out of ideas!
(Sorry, english isn't my first language)
I have update your css(scss), it dont have any padding or white space which u were pointing in ur image, see codepen here
h2{
margin: 0;
}
html,
body {
padding: 10px;
.greybox {
background-color: #c7c7c7;
padding-bottom: 20px;
margin: 0 10px 300px;
border-radius: 10px;
}
.statbox {
background-color: #f1f1f1;
padding: 10px;
border-radius: 10px;
height: 100%;
width: 100%;
text-align: center;
display: table;
bottom: 0px;
h3 {
font-weight: bold;
color: #1155cc;
margin: 0;
}
}
.flex {
display: flex;
//flex-direction: row;
//justify-content: space-around;
height: 100%;
width: 100%;
margin: 0;
}
.absolute-center {
display: table-cell;
vertical-align: top;
text-align: center;
height: 100%;
padding: 0;
margin: 0;
}
}
I need to display one paragraph aligned to the left, another paragraph aligned to the right, and a centered image, all on the same line on the footer of a webpage.
How do I achieve that? My current code gets the second paragraph on a new line.
HTML
<div id="footer">
<p class="alignleft">Text</p>
<img id="logo" src="#">
<p class="alignright">More text</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
Hope this helps for you:
<div id="footer">
<span>Text</span>
<span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
<span>More text</span>
</div>
#footer {
width: 100%;
display: table;
table-layout: fixed;
background: gray;
}
#footer span {
display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }
JSFiddle DEMO
Here's what I ended up doing:
Enclosing the texts and images on DIVs,
Explicitly setting the width percentage of these DIVs to 33.333% (1/3rd) each,
Left-Floating these DIVs,
Using text-align to align the elements inside those DIVs.
No need to change the order of my HTML, and works with as many elements as needed, just changing the percentage value! :)
Code
HTML
<footer>
<div id="footerleft"><p>Text</p></div>
<div id="footercenter"><img src="./img/logo.jpg" alt="Logo"></div>
<div id="footerright"><p>More Text</p></div>
</footer>
CSS
#footerleft {
float: left;
width:33.333%;
text-align:left;
}
#footercenter {
float: left;
width: 33.333%;
text-align: center;
}
#footerright {
float: left;
width:33.333%;
text-align:right;
}
You need to rearrange your HTML:
<div id="footer">
<p class="alignleft">Text</p>
<p class="alignright">More text</p>
<img id="logo" src="#" />
</div>
DEMO
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