I have a web page that has two columns one I have to float left and the other float right which works fine on a regular webpage. However when I view it on a phone for example(I have mobile jquery and css) So it all fits to the dimension of the screen. And since the two column page doesn't fit, it puts its on the next line, which then looks wrong because the column on the right is then aligned right on the next line. What is the best way of aligning it left and right without using the float css property. I think I should be able to do this by either setting the margin or padding using a percentage. Any ideas on the best way to do this?
Set a minimum width to the body so that the two divs fit on the same line.
body{
min-width: 800px; //or whatever the size of the two divs is
}
You're probably doing it right, but you want to remove the float properties on mobile devices, and remove the width if you previously set it so they fit the full screen, and apply margins (if necessary).
#media screen and (max-width: 480px) {
.floated-div {
float: none;
width: auto;
margin: 0 1em;
}
}
You can read more here: http://css-tricks.com/css-media-queries/
Here is a jsbin (http://jsbin.com/funevi/2/edit?html,css,output) showing how to align two items on the same row without using floats or flexbox. To make matters better, using inline-block instead of floats allows the left and right content to be vertically aligned relative to each other.
The default is to be top aligned relative to each other. But adding the class vmiddle or vbottom to the containing div.left-right element will cause the left content box and the right content box to be aligned with each other.
box-sizing: border-box allows us to use logical numbers safely across browsers and helps prevent the contents from wrapping around if borders or margins are added to the left or right content divs.
When using inline-block elements, to prevent what appears to be white space around the left and right content elements, the container specifies a font size of 0. The font size is then set to initial for the content divs.
Lastly the colors are set on the left and right content divs simply to make it visually apparent how the left and right vertically align relative to each other and are not required, obviously.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.left-right {
box-sizing: border-box;
display: inline-block;
font-size: 0;
position: relative;
white-space: nowrap;
width: 100%;
}
div.left-right div.left,
div.left-right div.right {
box-sizing: border-box;
display: inline-block;
font-size: initial;
position: relative;
white-space: normal;
width: 50%;
vertical-align: top;
}
div.left-right.vmiddle div.left,
div.left-right.vmiddle div.right {
vertical-align: middle;
}
div.left-right.vbottom div.left,
div.left-right.vbottom div.right {
vertical-align: bottom;
}
div.left-right div.left {
background: firebrick;
text-align: left;
}
div.left-right div.right {
background: forestgreen;
text-align: right;
}
</style>
</head>
<body>
<div class="left-right">
<div class="left">
<p>Paragraph 1</p>
</div>
<div class="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</div>
</body>
</html>
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>
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.
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
How can I place two divs right next to each other (left and right) in order that the left div auto sizes depending on how wide the right div is.
So for example if the right container is 100px wide and the right div in the container is 10px wide ,then the left div is 90px wide. OR if the right div is 40px wide then the left is 60px wide.
Thanks
This is a trick I use a lot
<style>
.sidebar {
width: 600px;
float: left;
background: #00ff00;
}
.content {
margin-left: 610px;
background: #ff0000;
}
</style>
<div class="sidebar">
sidebar
</div>
<div class="content">
content
</div>
You set the width of one element and float it, then you force the element you want to sit beside it into the gap by putting a margin on it the same width as the floating element.
Word of warning: In this example, the sidebar element MUST appear first in your source code.
You can adjust the width of the columns dynamically by changing the width of one element and the margin of the other element.
Save the source to an html file on your destop and have a play around with it to figure out how it works.
I agree with the comment above. Just make sure that you float: right; the div that you want to the right side of the screen. I would have left this as an additional comment, but do not have enough rep to do so.
<style>
.left {
width: auto;
}
.right {
width: 100px;
float: right;
}
</style>
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)