I am having trouble centering a div within its parent. I'd also like to make the child div auto fit its text content with a background colour applied. The child in question is #JoinSft-msg-block
here's my html:
<div id="JoinSubfooter">
<div id="JoinSubfooter-wrapper">
<div id="subft-line"></div>
<div id="JoinSft-msg-block">some text here</div>
</div>
Here's my CSS
#JoinSubfooter {
width: 100%;
height: 200px;
background: transparent url(../images/grey_body_noise.png);
clear: both;
/*Clears all columns and sets the footer at the bottom*/
}
#JoinSubfooter-wrapper {
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
#JoinSft-msg-block {
display:inline-block;
padding: 10px 10px 10px 10px;
background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
margin: 0px auto;
}
Fiddle
If you are using an inline-block element, you can just apply text-align center to its parent;
i.e.
#JoinSubfooter-wrapper {
text-align:center;
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
You could try this instead of display:inline-block; but not sure if it works in all browsers
display: table;
Related
Layout.cshtml
<section id="main">
<div id="sidebar">
#{Html.RenderAction("CategoryMenu", "Store");}
</div>
<div id="content">
#RenderBody()
</div>
</section>
style.css
...
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
overflow: hidden;
}
#sidebar {
display: block !important;
width: 15%;
float: left;
font: bold 20px arial, verdana;
background: green;
height: inherit !important;
}
#content {
display: block !important;
float:none;
}
...
I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?
Sidebar is floating left, so it will be taken out of the DOM flow and set up to the left. If you don't want #content to appear next to it then you need to add clear: both to #content style. That will force it to clear any floats around it and appear on the next line. However, it will not stop #sidebar from floating and there will be nothing next to the sidebar.
Can you clarify what you are trying to do since you are specifically setting #sidebar to float:left but then asking how to make them not float.
I am trying to center two spans horizontally in a 150px div. I thought the simplest way of doing this world be to set the line-height of each of the spans to 150px, but for some reason, the text is not being centered when I try this method.
Here is my code:
HTML:
<div class="top">
<img src="/wp-content/themes/shipping/images/TV.png" />
<span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>
CSS:
.top {
height: 150px;
padding: 10px 0;
}
.top img {
max-height: 100px;
padding: 0 10px;
}
.cantstop {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 150px;
font-size: 45px;
margin: auto 0;
text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
}
.shipping {
font-family: 'Grand Hotel', cursive;
font-weight: normal;
font-size: 75px;
line-height: 150px;
margin: auto 0;
text-shadow: 4px 4px 0px rgba(217,144,178,1);
}
You can see the issue in action at cantstopshipping.com
Thank you for your time.
Add
.top img {
float:left;
}
.top span {
float:left;
}
and change
.cantstop,
.shipping {
line-height:130px;
}
The top container is actually 130px not 150px due to the padding on the top and bottom.
Hope my answer makes sense, let me know if it doesn't.
To align it vertically,
DEMO
Use vertical-align:middle
.top span {
vertical-align:middle
}
To align it horizontally,
DEMO*
Use .top { text-align:center }
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
Hi all and good morning!
The issue I'm having today is with IE7's rendering (shock, horror) of my work in progress website. Below is some code that is intended to create a page wide <div> that has an image on the left hand side (an arrow) and then 2 lines of text to the right of the image, then a progress bar holder <div> with another <div> inside that will be widened and narrowed to fill the progress bar.
<div class="courseItem">
<img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
<p><span class="title">Intermediate Microsoft Excel 2010</span><br />
<strong>Last accessed:</strong> 21st September 2011</p>
<div class="courseProgress">
<div class="progressContainer">
<div class="progressFill" style="width: 60px">
</div>
</div>
<p>50%</p>
</div>
<div class="clearBoth"></div>
</div>
Now, what's the problem you ask? Well the issue is that for some reason, and this has really stumped me, the first of these bar divs (there are 4 in total, all exactly the same as the code above, no changes what so ever) has a massive white space between itself and its border which forces the other 3 bars below to be pushed away.
Here's the css;
.courseItem {
margin: 0px 0px 15px 0px;
border-bottom: 1px solid #b0dff7;}
.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}
.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}
.courseItem .courseProgress {
float: right;}
.courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}
.courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}
.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}
This is the visual representation
http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg
Thanks in advance.
(Sorry for long windedness, just trying to paint a picture)
Remove the float:left property of .div p, and add display:inline-block;. Then, define the clear:both CSS property for the .clearBoth class.
Fiddle: http://jsfiddle.net/Jqhe8/
Fixed CSS:
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
clear: both;
}
In your code you didn't clear it's parent div & you .clear class is not working so; first clear the parent div because the child div's have float in it. Write like this
.courseItem {
border-bottom: 1px solid #B0DFF7;
margin: 0 0 15px;
overflow: hidden;
}
I am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.
To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)
The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image.
(see above url but "withoutfloat.png")
How can I get the shadow div to wrap the image and keep it centered within the li?
Css:
<style type="text/css">
ul
{
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
}
li.box
{
display: inline;
float: left;
margin: 3px;
background: red;
position: relative;
}
.wraptocenter
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
}
.wraptocenter *
{
vertical-align: middle;
}
.shadow
{
background: blue;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadow img
{
margin: -4px 6px 6px -4px;
}
</style>
Html:
<ul>
<li class="box">
<div class="wraptocenter">
<span>
<div class="shadow">
<img src="Handler.ashx?id=936&size=103" />
</div>
</span>
</div>
</li>
</ul>
Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.