I'm trying to align text on the left and on the right side of my footer. The problem is that the text on the right falls a line below the text on the left. I want them to be even on the same line. Any help would be appreciated! Thanks for the help!
Here's my code: http://jsfiddle.net/kc6AL/
HTML
<!--Footerline-->
<div id="footerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
CSS
#footerline {
width: 100%;
overflow: hidden;
margin: 5px auto 10px auto;
text-align: center;
}
#footer {
max-width: 980px;
text-align: center;
margin: auto;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-weight : 300;
font-size : 14px;
color : #000;
}
.copyright {
text-align: left;
}
.social {
text-align: right;
}
I've forked your jsfiddle:
http://jsfiddle.net/82ZU8/
the key here is to float the <h3/>s
CSS
.copyright {
float: left;
}
.social {
float: right;
}
HTML
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
<div style="clear: both"></div>
</div>
Note that you must clear the floated blocks, so the footer div will be fixed.
The reason that the text-align approach doesn't work in the way you will expected, is because <h3 /> is a block element, so it will fill the entire width and causing the next h3 to go to next "line". Giving the float to a block element, will cause the element to shrink to its content and allowing other elements to be aside of it.
Just change your text-align to float for both .copyright and .social and you're golden.
EDIT Here's a jsFiddle demo with some unnecessary stuff removed: http://jsfiddle.net/kc6AL/6/
Do this: (Add the floats to your css)
.copyright {
float:left;
text-align: left;
}
.social {
float:right;
text-align: right;
}
I would simply use one h3 and float the social icons within that head tag.
Updated fiddle
<h3 class="copyright"><span class="social">Social Links.</span>Copyright Stuff.</h3>
CSS
.social { float: right; }
just add display: inline;
to your h3 element.
see this: http://jsfiddle.net/kc6AL/3/
for more information: http://learnlayout.com/display.html
Related
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
Sorry if the title isn't very clear, but I'm trying to figure out how to solve the following problem using CSS.
I have a text that should be shown in two different lines: imagine first line is "hello world" and second is "goodbye"
I'd need to show the text in this way, in the center of the screen:
hello world
goodbye
I'm using this as first attempt but all I get is both lines centered. I'd need to have the second line aligned to the right.
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
}
Thank you.
The simplest solution: Have your paragraph aligned to the right with the max-width set to the width of the first-line, the second line will automatically break and be aligned to the right.
html
<div id="logo">
<p>Hello World goodbye!</p>
</div>
css
#logo
{
display:block;
width:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
#logo p
{
max-width:80px;
text-align:right;
}
Here's a functional fiddle
HTML:
<div id="logo"><p>First line<br />Remaining Text</p></div>
CSS:
div#logo {text-align:center;}
div#logo p {display:inline-block; text-align:right;}
If you know the width of the text inside the logo div it's a relatively simple thing to do, if you don't I do believe you're going to need jQuery to accomplish it.
<div id="logo">
<p class="right">
hello world<br />
goodbye
</p>
</div>
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
position:relative;
height:100px;
}
.right{
position:absolute;
width:90px;
margin-left:-45px;
}
Demo: http://jsfiddle.net/calder12/QnGDs/1/
If you put that text in a p element like:
<div id="logo">
<p>Hello world <br />goodbye</p>
</div>
And apply the following css:
div#logo
{
width: 75%;
margin: 0px auto;
}
#logo p
{
text-align: right;
}
I believe that is what you want.
How about putting your second line in some other container and then push it towards the right
<div id="logo">
hello world<br/>
<span class="right">goodbye</span>
</div>
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
}
.right {
text-align: right;
float: right;
}
only in case the width is known or pre-set
<div class="wrapper">
<div class="first-line">hello word</div>
<div class="second-line">goodbye</div>
</div>`
<style>
.wrapper{ width: 70px; margin: 0 auto;}
.first-line { float: left;}
.second-line{ float: right;}
</style>`
Explanation
.wrapper:
width - must be known and pre-set not necessarily in the css you can use in-line style
margin - top and bottom 0px where left and right equally balanced
.first-line:
float - to the left
.second-line
float - to the right
Please check the link to see working example
http://jsfiddle.net/pQTBz/
I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:
I have tried below code, but have been unsuccessful. What am I doing wrong?
<div style="border-bottom:1px;">
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>
Original answer (still working just fine)
See the snippet below. The idea is to make the <h1> inline to allow the second text to be at the same line.
header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }
<header>
<h1>Text</h1>
<span>text2</span>
</header>
2020 Update
See the snippet the snippet below that makes use of Flexbox. So instead of setting the h1 to an inline-block, you can make the header a flex container. A flex container will (by default) layout its children on a horizontal axis.
Note that you also need align-items: center to keep the h1 and span on the same vertical axis. Also, note that you might want align-items: baseline if you want the texts to appear on the same baseline (like my original answer).
header {
display: flex;
align-items: center;
/* Remove the next line if you want the span to appear next to the h1 */
justify-content: space-between;
border-bottom: 1px solid #000;
padding: 10px 30px;
}
<header>
<h1>Text</h1>
<span>at the end</span>
</header>
I came up with a simple solution. My requirements are slightly different in that I want my status right aligned.
.my-header h2 {
display: inline;
}
.my-header span {
float: right;
}
<div class="my-header">
<h2>Title</h2>
<span>Status</span>
</div>
<div style="clear:both"></div>
Add this line border-bottom:1px solid #000
<div style="border-bottom:1px solid #000;">
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>
DEMO
Use class name instead of inline-style.
Try
<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>
instead?
There are two methods to accomplish H1 and TEXT inline. To clarify, TXT is in an element container. You suggest DIV, but any symantic element will do. Below, h1 and p illustrate a common use, while showing that you need not hide from element blocking, using DIV's (though divs are pandemic for many javascript coders).
Method 1
.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">
Method 2
h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>
I think you should write like this :-
HTML
<div style="border-bottom:1px solid black; overflow:hidden;">
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>
CSS
h1 {
float:left;
margin:0px;
padding:0;
}
.right {
float:right;
margin:0px;
padding:0px;
}
DEMO
EVEN YOU CAN USE THIS METHOD ALSO WITH MINIMIZED MARKUP :- DEMO