Please look at this picture it will explain much better
https://gyazo.com/333fc2ef04f558480386b7be67eb1bda
I have a orange footer at the bottom of my webpage and i want the text to be aligned "left", "center" and "right" on the same line within the footer bar.
Right now the text is aligned but the text 3 aligns are under each other at 3 seperatly lines.
This is my HTML:
<div class="row">
<div id="footer">
<div align="left"><h3>Contact</h3></div>
<div align="center"><h3>Computerbasen</h3></div>
<div align="right"><h3>Info</h3></div>
</div>
</div>
This is my CSS:
#footer {
background-color: #FF7633;
width: 100%;
height: 50px;
border-radius: 5px;
padding-top: 10px;
position: absolute;
bottom: 0;
}
I recommend flexbox for this type of layout.
Remove the align attributes and add this to your #footer.
#footer {
display: flex;
justify-content: space-between;
}
You could achieve it in many different ways.
#Vestride gave you one way.
Another approach is to add another selector :
#footer div{
display: block;
float: left;
width: 30%;
}
OR
#footer div{
display: inline-block;
width: 30%;
}
This will select all div inside #footer and align them.
We divided the three div width to be aligned even. So, since width: 100% is even. we need to subtract 10% from it to use it for margin, and the rest will be divided by 3. so each div will be 30% of the footer width. This way it will be on the same line. Remember, any element has 100% of width will be on a separate line. Meaning, if two DIVs in the same line have 100% of width, they'll be under each other, but if the width divided between them (each one of them is 50% width) then they will be at the same line.
You could use the same idea, and be creative in your own way. As there are a various of methods that can be achieved differently in CSS. Just pick your favorite one to do it.
Related
I can not understand how css works, and it's annoying me. I was trying to do some basic side by side two divs and one div below them.
At first I've learned that I had to give float:left for both side by side divs. For curiosity I did'nt gave float:left for the second side by side div, and I came across this layout:
(source: imge.to)
Then I gave float:left for the second side by side div, and I came across this layout:
(source: imge.to)
Question: I didn't gave float:left for third div but it didn't act like the first screen shot. Why?
css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.blog-posts {
width: 50%;
background-color: #0000ff;
float: left;
}
.other-posts {
width: 25%;
background-color: #00ff00;
float: left;
}
.author-text {
background-color: #ffff00;
}
html code:
<div class="container">
<div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
<div class="other-posts">extra dummy text</div>
<div class="author-text">author text</div>
</div>
When you use a float, you break the natural box-model behavior of the markup.
Your first floated element has a width of 50%, relative to the parent (1000px) it will take the half of the .container. The second (floated) element will take the next 250px. And here comes the good thing.
The third element, which isn't floated, is also a div, thus a block-level element (so implicitly it will take 100% of the width of its parent). If you set the background-color of your first and second element to a transparent one #0000ff00 and #00ff0000 respectively. You will see your third element is growing behind them.
This is, what I mean with "breaking the box-model". Now, to understand this beter, you could start giving a explicit width to the third element. Let's say: 90%, you will see how the yellow background will reduce itself from the right side.
If you set the width to 50% it will "jump" down, to the second line. It will be even broad as the first element, but two times height. With other words, it will try to fit in the first available space.
To avoid this, in the past, we used the clearfix hack... but since flexbox and css grids are broadly supported, we don't have to rely in floats anymore for this side-by-side layouts.
Float has their own use cases, is not that float sucked, it's just not meant for layout.
For more information on this topic you can check this great article about floats on CSS-Tricks.
Wrap the items you want side by side in another wrapper, then apply flexbox to that wrapper:
.my-flex-wrap {
display: flex;
}
Then remove all the floats. Done.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.my-flex-wrap {
display: flex;
}
.blog-posts {
width: 50%;
background-color: #0000ff;
}
.other-posts {
width: 25%;
background-color: #00ff00;
}
.author-text {
background-color: #ffff00;
}
<div class="container">
<div class="my-flex-wrap">
<div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
<div class="other-posts">extra dummy text</div>
</div>
<div class="author-text">author text</div>
</div>
I'm trying to figure out how to center more than one DIV horizontally.
My Code looks like this:
HTML:
<div id="circle">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
CSS:
#circle {
text-align: center;
}
#circle1 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
#circle2 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
They do center horizontally but there's a break between the circles and I have no clue how to get them in a straight horizontal line.
I googled already, but didn't found anything that works..
You can add display:inline-block; to both #circle1 and #circle2
Also, thee is no need for margin: 0 auto; on both div's since you have text-align:center; in your wrapper.
JSFiddle Demo
You shouldn't use display: inline-block to center elements like divs due to how whitespace in the HTML document will affect the styling.
This jsFiddle outlines the differences. imbondbaby's inline-block divs have a small amount of whitespace between them that can only be removed by eliminating whitespace in your markup. This can be diffcult to diagnose and debug, and has bitten me before.
Instead, center the container of the divs using margin: 0 auto. Then float: left the divs inside their parent to place them next to each other, and apply a clearfix to the container.
Style:
#wrapper {
margin: 0 auto;
}
.clearfix {
display: table;
clear: both;
}
.circle {
float: left;
}
HTML
<div id="wrapper" class="clearfix">
<div class="circle"></div>
<div class="circle"></div>
</div>
If I've understood your question correctly, you want the two circles to be on the same line, centered within the wrapper circle div.
Basically, you could float one circle to the left, and the other to the right to get them on the same line. Then to adjust how close they are together within the wrapper div, you could adjust the width property of the wrapper div with a percentage (which in this case is relative to the div's parent, the body).
Here's an example of a potential solution: http://jsfiddle.net/UFN5S/
By the way, there are other similar questions to this already on SO. I know you've said you googled, but usually with questions like this one there has already been asked and answered on SO.
i.e.:
How to center two divs floating next to one another
or
Aligning two divs side by side center to page using percentage width
Hope that helps!
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
This question already has answers here:
Horizontal scroll in DIV with many small DIV's inside (no text)
(2 answers)
Closed 9 years ago.
I have HTML structure like this :
<div class="wrapper">
<div class="fixed_column"></div>
<div class="fixed_column"></div>
<div class="fixed_column"></div>
</div>
Here is my CSS :
.wrapper{
width:500px;
float:left;
/*overflow-y:scroll;*/
overflow-x:scroll;
}
.fixed_column{
float: left;
height: 600px;
position: relative;
width: 250px;
}
So I want only two columns to fit inside my wrapper. And so without third column being present it fits inside.
Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I end up with vertical scroller instead of horizontal. added overflow-x to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.
However I tried to increase wrapper to 750px and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?
Why would there not be horizontal scroll once my wrapper is 500px and I have three columns inside with width:250px on each.
Add white-space: nowrap; to the container, use inline-block instead of float, and use overflow-x instead of overflow-y.
This works:
http://jsfiddle.net/vXqY2/
.wrapper {
width: 600px;
white-space: nowrap;
overflow:scroll;
}
.fixed_column {
display: inline-block;
height: 100px;
width: 250px;
background-color: red;
}
The floated elements are going to automatically wrap down to the next level if they start going off the right of the parent container. That's how floats work. To keep them on the same line, you have a few options:
Make the parent container wider (as you did), but you'll need an extra element for the scrollbar
Switch from float: left; to display: inline-block; (as #Alex suggested), but you'll need to make concessions for IE7.
Switch from float: left; to display: table-cell;. Don't recommend this, I tried it and it turns out it's kind of painful :-p
See all techniques in a jsFiddle demo
It is because your fixed columns divs are only 250px so they never break the 505px container they are currently in.
Here try this.
example:
<div class="wrapper">
<div class="scroll-container">
<div class="fixed_column">A</div>
<div class="fixed_column">B</div>
<div class="fixed_column">C</div>
</div>
</div>
.wrapper {
width: 505px;
position:relative;
overflow-y: scroll;
overflow-x: scroll;
}
.scroll-container {
width:1000px;
}
.fixed_column {
float: left;
height: 600px;
position: relative;
width: 250px;
background-color: green;
}