I have a problem with my layout. I have a content div that I want to expand the more text there is in it. And at the bottom there's a div that should hold some contact info.
My problem: I can't figure out how to allow the content div to become larger without overlapping with my bottom div. I've tried margins and paddings but I can't seen get it to work.
Any kind of help is appreciated.
I pasted the code on Pastebin so this post wouldn't be so long. A fiddle: http://jsfiddle.net/NpY66/
CSS: http://pastebin.com/7ztPs253
HTML: http://pastebin.com/YBqJJs3g
The answer is, you need to use clear: both; on your footer style.
#bottom{
border: 1px solid gray;
font: 12px Helvetica, sans-serif;
padding: 5px;
background: white;
text-align: center;
clear: both;
}
This will prevent floating div tags from overlapping.
Updated version of your JS Fiddle
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 want to know is there a way to centre text vertically without the use of a container element. something which is responsive.
EDIT
the only value I would know is the height of the h3 element, nothing more,
content will appear underneath some as etc
CSS
h3 {
height: 140px;
padding-top: 80px;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
HTML
<h3>TEST</h3>
Here is an example of what i want to achieve
codepen test
Line-height is a beautiful thing, especially if its just text. And if you want to be responsive:
h3 {
background-color: transparent;
height: 40vh;
line-height: 40vh;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
There is no easy way to do this. I have come up with a couple techniques over the years.
You have 80px in padding and a height of 140px for a combined height of 240px. If you know that the text will not exceed one line you can do it using line-height.
h3{
line-height:240px;
...
}
Another way is to use padding if you know the height of your text.
h3{
font-size: 20px;
line-height:20px;
padding:110px 0;/* (240-20)/2 */
...
}
note: I don't like the display: table-cell hack and have yet to need it. Why move away from a table based layout if you're just going to tell the browser to treat the element as a table?
Add to your code:
display: table-cell;
vertical-align: middle;
You will need to adjust your padding. That should work.
This article provides 6 different methods and their associated pros and cons; it explains it far better than I could here. The solutions provided as answers here are good, but the article really covers niche cases and allows you to choose the best method to fit your needs.
http://www.vanseodesign.com/css/vertical-centering/
You're going to have a containing element, regardless. It's just that the body might be the container.
You could do this:
body {
height:100%;
display: table;
margin: 0px;
padding: 0px;
}
h3 {
display: table-cell;
vertical-align: middle;
}
OR...
body {
height:100%;
margin: 0px;
padding: 0px;
}
h3 {
position: relative;
top: 50%;
}
edit - removed width specific styles as it has nothing to do with the solution. Thanks to Jason for the margin/padding set to 0px to remove ugly scrollbars. Jason also noted that this solution did not work for Chrome unless the "body" element in the styles was changed to "html, body", but I was not able to replicate this problem using Chrome version 35.0... For good measure I also opened a test page in Safari and Firefox and they also worked as expected.
edit^2 - Figured out the problem Jason saw. If you use the html5 doctype, then, yes, you will have to include the html element with the body style. This also makes the scrollbar reappear in the relative position solution. So that's fun. I will leave this up for the purpose of saving frustration in the future, but I would check out the link provided in Jason's solution.
http://phrogz.net/CSS/vertical-align/
How can I vertically center text in a dynamically height div?
I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
I have a problem concerning CSS and HTML.
I'm trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can't set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).
I've tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.
I'm going a bit crazy over this, and google is no help!
Thanks in advance!
UPDATE:
Sorry about not including code or images. This is what I'm trying to do illustrated with images:
One state of the UL width
Another state of the width
The wrapping DIV can't stretch the full width of the container. It has to wrap around the UL.
The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.
I also need it to be centered. I've made it work with float left and float right, but I need it to be centered.
This is the code I'm currently using for the container DIV and the UL and LI elements:
#container{
height: 100px;
width: 500px;
font-size: 14px;
color: #grey;
display: table-cell;
vertical-align: middle;
}
#container ul{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#container li{
background: url(checkmark.png) center left no-repeat;
display: inline;
padding-left: 20px;
margin-right: 5px;
}
#container li:last-child{
margin-right: 0;
}
UPDATED
I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/
#wrapper {
background: #ccc;
margin: 0 auto; /* to make the div center align to the browser */
padding: 20px;
width: 500px; /* set it to anything */
text-align: center;
}
#wrapper ul {
background: #aaa;
padding: 10px;
display: inline-block;
}
#wrapper ul li {
color: #fff;
display: inline-block;
margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
color: #fff;
display: inline-block;
margin: 0;
}
<div id="wrapper">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
This is an old post, but what you can do now is:
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
The problem isn't wrapping the DIV around the content, but getting the content to state it's actual size, therefore pushing the DIV boundaries out. There are several things that need to be considered when tackling this issue. Not just from an existing UL or LI tag, but a DIV within a DIV.
I use custom tags to help describe layouts cleaner. Custom tags are DIV tags, thus their properties must be manipulated by CSS in order to get the proper behavior.
<layout-linear horizontal>
<control-label>Label 1</control-label>
<control-label>Label 2</control-label>
<control-label>Label 3</control-label>
<control-label>Label 4</control-label>
<control-label>Label 5</control-label>
</layout-linear>
This layout suggests that the contents .. the control-label(s) tags .. will be display in a horizontal row. To get the border for the layout-linear tag to wrap around the content of the control-label tags, there are several things to do:
layout-linear[horizontal]
{
display : block;
box-sizing: border-box;
border : 1px solid black;
padding : 1px 1px 1px 1px;
white-space: nowrap;
width : 100%;
clear : both;
text-align : center;
}
First, the box-sizing property must be set to border-box. This will force the linear-layout (DIV) tag to wrap around content. Padding, Border, Margin will insure that an empty DIV tag displays. Other tricks to make an empty DIV tag display are to use or :after { content:.; visibility: hidden; }.
If you don't want the control-label tags to wrap, adding white-space : nowrap.
I will discuss text-align when I discuss the float property of the control-label tag.
The next part requires the inner DIV tags (control-labels) to properly specify their box-sizing type and borders.
control-label
{
display : inline-block;
/* float : left; */
box-sizing: border-box;
border : 1px solid black;
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
}
Display : inline-block, causes the control-label tags to flow left to right. Display : Block, will cause the tags to stack up vertically.
Float is commented out specifically to draw your attention to the fact that float will cause the layout-linear tag shrink to its smallest box size, based on the margins, padding, and border.
To have the control-labels flow right to left, add text-align : right to the layout-linear tag. Or in this specific case, set text-align : center.
Again, box-sizing is used to tell the control-label (DIV) tag to wrap around it's content completely. Not just the text, but the edges of the box as drawn by the border, padding and margin settings.
This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.
Happy Coding.
You didn't supply code, but take a look at this fiddle I just setup, which might help:
http://jsfiddle.net/qXDJr/
Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.
This might help.
If you cant set the width you can just add align='center' in the div wrapping ul
<div align="center">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
For some reason my footer border is at the top of the page while the text is at the bottom. Can anyone tell me why it's doing this?
Your can see the page here:
I would expect the red line to be just above my footer. What am I missing?
Floats can cause layout issues like this. Since you are only using them on your content containers you can remove the float: left; from .search_summary_container and add display: inline-block;.
Demo: http://jsfiddle.net/ThinkingStiff/HSNNZ/
.search_summary_container {
height: auto;
width: 480px;
margin-top: 10px;
border: 1px solid #c1d1da;
display: inline-block;
}
Add clear:both to your footer:
<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>
Explanation: If you have a float left and a float right, then, the content that comes after will go under your floats. So by clearing, it resets the floats and renders it after the content that is floated.
In the footer, just set the css to clear:both.
Read this article: http://css-tricks.com/all-about-floats/