I was wondering how I could achieve this effect. Firstly content currently is in a div called 'contentDiv'. I have all the following content float:right of the div. What I want to achieve is an imaginary border (look at image) in which the content cannot cross.
Then I want the content to be centered.
How would I achieve this with CSS? Or what elements could I use to replicate this effect.
I have looked into centering the content and this code works for me -
margin-left: auto;
margin-right: auto;
#contentDivParent {
/*It will define the imaginary border*/
padding-left:30%;
width:70%;
}
#contentDiv {
/*remove the float*/
float:none;
/*center*/
margin:0px auto;
/*force line-break*/
max-width:100%;
}
Related
See Below for the Self-contained Example
Pictures of what I am trying to do, and what I actually get:
I want to create css rules so that my content looks like this (correct):
I am struggling to find a simple solution online, so my content looks like this (wrong):
Summary of what I'm trying to achieve:
I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.
I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.
Fixed heights are not allowed. I am trying to avoid Java Script for this. Is there a solution in pure CSS?
CSS snippet
.left {
float:left;
width:50%
}
.right {
float:right;
width:50%;
background-color:darkgrey;
overflow:hidden;
}
img {
min-width:100%;
height: auto;
width: 100%;
}
As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.
Here is my jsfiddle so you can see the problem:
http://jsfiddle.net/1upodwg9/
To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.
Fiddle
http://jsfiddle.net/1upodwg9/14/
.child-row {
display:block;//added
background:red;
}
.left {
float:left;
width:50%;
height:100%;//added
display:inline-block;//added
}
.right {
width:50%;
background-color:darkgrey;
display: inline-block;//added
}
Fiddle example when you have more content
http://jsfiddle.net/1upodwg9/15/
Something like this fiddle ?
$(window).resize(function () {
var height = $("#leftDiv").css("height")
$("#rightDiv").css("height", height);
});
If you're only catering to IE8+ and/or modern browsers you can use display: table, display: table-row, display: table-cell
.parent {
margin: auto; /* helps place in middle */
width: 70%;
display: table;
}
.child-row {
display: table-row;
}
.child-col {
display: table-cell;
vertical-align: top;
}
Example: http://jsfiddle.net/1upodwg9/16/
(Sorry, I changed the image cos for some reason it wasnt loading on my end)
EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)
My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.
Fiddle:
http://jsfiddle.net/48dk6/
Footer CSS declarations.
/* footer and descendants */
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
}
/* footer col styling/positioning */
.footerCol {
background-color:green;
width:180px;
float:left;
margin:10px 5px 10px 5px;
}
Add overflow:auto to your #footer CSS:
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
overflow:auto;
}
jsFiddle example
This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.
Add overflow: auto; to #footer.
When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)
#footer {
font-size: 1.3em;
margin-top: 10px;
clear: both;
background-color: red;
overflow: auto;
}
In fact, you should have a height set for your footer, see jsFiddle
height:240px;
JSFiddle:
http://jsfiddle.net/48dk6/6/
Remove the floating and simply display the elements as inline-blocks
.footerCol {
background-color:green;
width:180px;
display: inline-block;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
The containing floats problem can be solved with 2 approaches:
Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.
All approaches have their advantages and limitations, so choose what fits better in your case.
There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.
I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
It's my button:
<div id="body">
<button>Hello</button>
</div>
and its style:
#body{
width:400px;
margin:0 auto;
background:#eee;
border:1px solid #ccc;
}
button {
display: block;
margin: 0 auto;
}
It's centered, but let's see the result in ipad:
It shifts to left.
Take a look at this case: http://jsfiddle.net/c2HLe/9/
Note.
This is similar to my previous question, but in this case I made it with a simple structure, so I think people can focus better on the problem.
To center your button using margin: 0 auto;, you also need to define the width of the button. Something like this.
Alternatively, you can also use this.
#body{
text-align: center;
}
button {
display: inline-block;
}
In your original CSS, if the width of the container (margin+border+padding+content width) exceeds 1024px (iPad viewport width), you will get unexpected results. So make sure you keep that in mind.
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>