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
Related
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 have DIV tags float left and right. By default the right DIV is hidden. I would like to show the first DIV in center by default when right DIV is hidden and move to left when right DIV is visible. Could you please suggest?
<div id="main">
<div id="left1" style="width: 50%; float: left">
<a href id="link">link</a>
</div>
<div id="right1" style="width: 50%; float: right; display:none"></div>
</div>
Rearrange your html like so:
<div id="main">
<div id="right1" >
</div>
<div id="left1">
<a href id="link">link</a>
</div>
</div>
Set CSS like so:
#main {
text-align: center;
}
#left1 {
display: inline-block;
width: 50%;
text-align: left; /* if you need it left */
}
#right1 {
width: 50%;
float: right;
}
See example fiddle.
Here's a javascript example using actual floats http://jsfiddle.net/tprats108/DNve9/
HTML
<div id="main">
<div id="left1" class="element center">
Show
</div>
<div id="right1" class="element hidden">
Text
</div>
</div>
CSS
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
.element {
width: 50%;
}
.hidden {
display: none;
}
JS (using jquery)
$(document).ready(function() {
$("#show").click(function() {
$("#left1").toggleClass("left center");
$("#right1").toggleClass("right hidden");
});
});
So here's my HTML:
...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>
<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]
The only CSS I have is:
* {
margin: 0px;
}
img.logo {
display: block; margin-left: auto; margin-right: auto;
}
I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.
It looks much more like a table than divisions to me...
<table class="header"><tr>
<td class="left"></td>
<td class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</td>
<td class="right"></td>
</tr></table>
Think about so CSS afterwards :
table.header{
width: 100%;
border-collapse: collapse;
}
table.header td{
vertical-align: top;
border: 1px solid #404040;
}
table.header td.center{
width: 800px;
height: 600px;
}
This is just a code sample, get the idea, and adapt to your own needs ^^
Add these classes to your css
.left
{
display:inline-block;
width:25%;
}
.center
{
display:inline-block;
width:50%;
}
.right
{
display:inline-block;
width:25%;
}
With the following markup, 2 solutions come to mind:
MARKUP
<div class="header">
<div class="left">
Some left test
</div>
<div class="center">
<img class="logo" src="http://placehold.it/50x50" />
</div>
<div class="right">
Some right text
</div>
</div>
Solution #1
Float left and right sides and use display-block on the center
FIDDLE
Css
.header
{
text-align: center;
width:100%;
}
.left
{
float:left
}
.right
{
float:right;
}
.center
{
display:inline-block;
}
Solution #2
Use text-align: justify; on the header element.
Then stretch the content to take up 100% width
FIDDLE
CSS
.header
{
text-align: justify;
width:100%;
}
.header > div
{
display: inline-block;
}
.header:after {
content: '';
display: inline-block;
width: 100%;
}
.left, .centre, .right {
float:left;
}
What float:left does is, is it'll make each container organize itself from the left, so you get:
[LEFT]-[CENTRE]-[RIGHT]
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>
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