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.
Related
I've been looking around, and haven't found a way to get my elements to display the way I want them too (Mostly because I've absolutey no idea what I'm doing in CSS).
Here's my JS fiddle:
https://jsfiddle.net/q0qjhk8p/2/
And here's an ASCII demonstation on how I wish for it to be displayed:
Title goes here
----------------------------------------------------------------------------
Content put here should be on [ image
the left side, yet not affect the goes
avatar on the right. here ]
And this
text should
be centered
underneath the
image.
---------------------------------------------------------------------------
Blablablablaba footer
So here's a solution using FlexBox
The things to note are...
I removed all your text-align stuff. That's the wrong property to use to get the layout you're looking for.
I made the Avatar container a percentage width, and set the width of the image inside to 100%. That way you have a somewhat responsive solution. You could set an explicit width of the avatar container if you wanted.
You can set an explicit width for the copy too, if you wanted. I'd suggest setting a percentage width and a right margin.
The heavy lifting is done with flexbox,
.user-profile-card > .user-profile-card-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
background: #AAA;
}
I've added some extra divs and also used the following CSS
float : left // float to content to the left side
float : right // float the avatar to the right side of the card.
display : inline-box // this is to make the image stay on the same line as the content
see fiddle below
https://jsfiddle.net/n4k469o3/
CSS
.user-profile-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
padding: 10px;
border: solid 1px transparent;
}
.content {
width:100px;
display: inline-block;
float: left;
}
.user-profile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2)
}
.user-profile-card > .user-profile-card-title {
padding-bottom: 10px;
border-bottom: solid 1px #ccc;
text-align: left;
font-size: 24px;
}
.user-profile-card > .user-profile-card-body {
padding: 10px;
text-align: left;
}
.user-profile-card > .user-profile-card-body > .user-profile-card-avatar {
align-content: right;
text-align: right;
display: inline-block;
width: 110px;
float: right;
}
.img-card-avatar {
border-radius: 50px;
}
.user-profile-card > .user-profile-card-foot {
padding-bottom: 5px;
padding-top: 10px;
border-top: solid 1px #ccc;
text-align: left;
font-size: 10px;
margin-top:240px;
}
HTML
<div class="user-profile-card">
<div class="user-profile-card-title">
A title is put here
</div>
<div class="user-profile-card-body">
<div class="content">
Content put here should be on the left side, yet not affect the avatar on the right.
</div>
<div class="user-profile-card-avatar">
<img src="https://i.stack.imgur.com/pH9qA.jpg"><br>
And this text should be centered underneath the image.
</div>
</div>
<div class="user-profile-card-foot">
Some footer stuff is put here.
</div>
</div>
The simplest way to do this is to wrap the main content in a div. Then wrap that and the div with the image and subtext in another div. I have wrapped them in main tag below, just so that stands out, but you can use a div if you're not familiar with semantic tags just yet.
https://jsfiddle.net/g90xxaaj/
Then I gave the main tag a css property of display: flex this makes the divs inside it sit side by side.
Then I added have the div encasing the image and subtext a `text-align: center' property.
You don't have to use flexbox for this but it is an excellent way to deal with things like this is css. The other way you could do it is to look into something called floats. Joshua Duxbury's answer explains how to do this. One reason not to use flexbox is that it is relatively new and won't work on internet explorer 9 or older. If that is not a concern then flexbox is much less confusing than working with floats in the long run.
This is probably the best starting point for learning more about flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is a great game to play for practice: http://flexboxfroggy.com/
And here is a fantastic free course if you have the time and are serious: https://flexbox.io/
I have the following part of my html
<div class="header">
<div class="header-bar">
<div class="pull-left">
<div class="title">Ci models database</div>
</div>
</div>
<div class="clear-both"></div>
<ol class=breadcrumb>
<li class="active">All models</li>
</ol>
</div>
the css(breadcrumb and active classes are bootstrap)
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
But between header-bar and breadcrumb html added a white space(see bootply). How can I remove this white space, since no padding and margin can be found between to divs.
The problem is that the calculated height of the internal .title div is greater than the calculated height of the container .header-bar. Properties like height, min-height, border, padding can directly effect heights, whereas properties like display, box-sizing and position can all indirectly effect height.
The result is the internal .title div pushes down the next div in the flow by 10px.
CSS has no rules that say a div must contain it's children in height and stop them from effecting other divs, even when height is directly defined. We need to tell it exactly how it should behave when things are rendered.
There are several ways to fix this:
http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden; on the parent. Overflow is a css property which is used how to control what happens when child elements are larger than their parents. It's worth noting that depending on other properties overflow won't necessarily render itself in a way that disrupts layout.
http://www.bootply.com/ssq3EAzeyk - set explicit heights to take strict control over the dimensions of the elements. This might be the best option for a header bar.
http://www.bootply.com/yeodYRLLJk - set a greater min-height on the parent, one which will definitely contain the child. This is useful if your padding is for alignment purposes - setting min-height: 40px; in the example does this.
http://www.bootply.com/GznfJxUWUF - remove the padding that is making the element calculate as taller (as mentioned in another answer).
Apostolos, the white space is coming from the .titleclass.
The bottom padding of 10px.
Zero this and the white space will go.
.title {
padding: 5px 5px 0px 5px;
you will have to add a float: left to both parent containers (.header-bar and breadcrumb) otherwise the clear won't affect anything. furthermore you will have to give both containers width: 100%
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
width: 100%;
float: left;
}
.breadcrumb {
width: 100%;
float: left;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
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;.
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
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/