I am having a lot of trouble lining up two divs. One is a twitter timeline box and the other a contact input box. Right now it looks like this: Not lining up divs page
The body is set to 1020px, the page in HTML is the following:
<div class="half" id="contact-info">
<h3>Contact Us</h3>
<p>Feel free to ask us any questions, send us any opportunities or pitch us your winning idea. There are infinite ways to play!</p>
<a class="twitter-timeline" href="https://twitter.com/8PlayerPictures" data-widget-id="450740338580140032">Tweets by #8PlayerPictures</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="half">
[contact-form-7 id="121" title="Contact form 1"]
</div>
the code for the half div is here:
.half { width: 50%; margin: 0; display:inline-block; }
this is the CSS. I tried playing with float, inline-block, margins.. pretty much all I can fathom. I'm still very new at this and could really use some pointers.
#contact-info {
color: #444;
line-height: 28px;
font-weight: 200;}
.twitter-timeline {
margin-top: 15px;
float: left;
clear:both;
width: 100%;
}
#wpcf7-f22-p5-o1 {
width: 100%;
display: inline-block;
text-align: center;
height: 500px;
border: 2px solid rgb(42,199,239);
/*background-color: rgba(42, 199, 239, .8);*/
/*background-color: rgba(128, 199, 242, 1);*/
background-image: url(http://i.imgur.com/QIXENNf.png);
border-radius: 3px;
}
How do I get these two divs to line up? What am I doing wrong here?
The first thing I want to point is :
Reason: space between inline-block elements
Both of the .half elements has a width of 50%, and the space between them also has a small width. Therefore the total width will bigger than 100%. That's why the two elements don't line up.
Some extra work is needed to remove space between inline-block element if you persist on using inline-block. Here You can get more information -> How to remove the space between inline-block elements?
Solution
Choose a way to solve this problem, and the first one is recommend.
Float
Adding float: left; to .half class will make things work in a pretty easy way.
Inline-block
At first, remove space between inline-block elements as described above.
Then make sure the two elements are top-aligned if you need that. And adding vertical-align: top; to .half class will help.
At last, this way is not recommended. I just raise a possible way that solves problem.
in .half class, add float: left;.
Related
I am trying to do a pretty simple thing, getting a container to line up to the right side of another container. For some reason I am really struggling.
I made a very basic fiddle to show what I am trying to do.
https://jsfiddle.net/Lvoy1dtd/
I have tried adding
display: inline;
float: right;
to
.top_post_out {
border: solid 1px #C0C0C0;
border-radius: 8px;
width: 30%;
margin-right: 25px;
padding-top: 25px;
}
As well as making it inline-block and many other things, but it not lining up.
What am I doing wrong?
https://jsfiddle.net/Lvoy1dtd/2/
Add "float: left" to your first container
rankingTableOut {
border: solid 1px #C0C0C0;
border-radius: 8px;
width: 60%;
margin-left: 15px;
padding-top: 25px;
float: left;
}
You need to add display:inline-block; to the rankingTableOut class instead of the top_post_out. Divs are by default block elements, which causes them to have a line break after them. So your next element is floating to the right of the next line, not the right of the current line as you wanted. The inline-block property will prevent the line break while preserving the width and height of your element.
Floating elements need to be defined in your markup prior to, or at the start of the content that is supposed to "float around it". Just reordering your containers solves your problem, no additional CSS required.
<div class="top_post_out">
<p>Make me right</p>
</div>
<div class="rankingTableOut">
<p>Make me left</p>
</div>
https://jsfiddle.net/Lvoy1dtd/3/
You should also read Understanding floats.
This is my code: http://jsfiddle.net/3GPTy/4/
CSS:
.price {
display: inline-block;
width: 19%;
background-color: pink;
margin-right: 8%;
}
.last {
margin-right: 0%
}
.container {
width: 780px;
margin:0px auto;
}
* {
margin: 0px;
padding: 0px;
}
What I don't understand is, I have 4*19 + 3*8 which should equal 100% but still it doesn't fit on one line?
To elaborate further, here's a few ways of solving the problem:
Comment out the space
</div><!--
--><div>
Put the space in the tags
</div
><div>
Just shove it on one line
</div><div>
The last one especially, ideally you should be minifying your HTML - I do on-the-fly with PHP magic, and with that I can write readable HTML and not have spaces.
CSS
.price {
width: 19%;
background-color: pink;
margin-right: 8%;
float:left;
}
http://jsfiddle.net/3GPTy/10/
Its because of the how the browser treats fonts; between letters it puts a small sliver of whitespace to space the characters out correctly. Counterintuitively this idea is applied to all elements, so if you have two div's at 50% width they will not fit on the same line because the small white space added makes the total width greater than 100%.
To solve this add:
font-size: 0;
to the parent div. You can then set the desired font size in its children to remove the white spacing that would have otherwise been added
Here's more detail on the issue from this CSS Tricks article, as well as other soultions including floating the elements and using comments.
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 have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!
Situation: I have a container with two direct children, we will call them left and right.
left should never be allowed to extend past the height of right, however right should be allowed to extend past the height of left.
I can't figure out how to do this with CSS (hopefully while maintaining the simplicity of my markup)
example html
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
example css
.wrapper {
display: inline-block;
margin: 10px 0;
}
.left {
float: left;
width: 60px;
background-color: #999;
}
.right {
float: left;
width: 540px;
border: 4px solid #666;
padding: 8px;
}
or see what I mean here
It's kind of an common problem. The thing is, you need either a CSS/background image trick or use javascript. One common used is Faux Columns.
Yes, you need to rely on JavaScript for this kind of problem, you could just always set the min-height of the left column according to the height of the right column, or something similar to that!
Using jQuery, this might help you getting started! http://www.cssnewbie.com/equal-height-columns-with-jquery/