i have this div class called 'answer_box', for each page thier will be 4 different answer boxes with different text each time. i want to make each answer have the same distance between each other, whether the box has a lot of text or little, to keep the design consistant.
my html code:
<div id="app">
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers"> little bit of text</span>
</div>
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers">you have priotrtoities over the people on the opposite direction</span>
</div>
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers">you have priotrtoities over the people on the opposite direction</span>
</div>
</div>
jsfiddle is here: http://jsfiddle.net/24E6W/1/
Use the following CSS
.answer_box {
margin-top: 20px;
clear:both;
overflow: hidden;
}
Is this the effect you want? jsfiddle.net/24E6W/3/
.answer_box {
margin:30px 0px;
height:50px;
}
.answer_checkbox {
height: 50px;
width: 50px;
background-color: black;
float: left;
margin-right: 5px;
}
Either set min-height on the answer_box div to cover the deepest box, or let jquery do it for you:
using min-height (css only)
quick fiddle using jquery
This will make the boxes the same height as the tallest one, the distance between each answer is set by the margin-top: rule. I'm assuming the .answer_checkbox div needs to be a consistent height
Just add this 2 properties to your class named ".answer_box"
.answer_box{
margin-top: 20px;
border-top:1px solid #000000;
display:block;
clear:both;
overflow:hidden;
}
Checkout jsfiddle here...
Related
I have three divs of equal width acting as three columns. There's a fourth div that I want to position in the right column directly beneath the div already in that column.
I've linked the way I want it to look in the comments. [I was constrained to using no more than two links in this question post.]
I want to do this elegantly making full use of the doc flow and styling of float, clear, display, and/or position . I don't want want to hack away with margins, padding, tops, rights, lefts etc. if possible. I'm not interested in any javascript.
The order of the first two divs are important and must be maintained. In fact, there are only two permutations of the doc order and both are shown below.
These two fiddles are as close as I've come: One and Two. Note that classes are semantic wrt position.
They share the exact same CSS, but differ in their HTML.
One - HTML
<div class="container">
<div class="top-right">top-right</div>
<div class="center">center</div>
<div class="left">left</div>
<div class="bottom-right">bottom-right</div>
</div>
Two - HTML
<div class="container">
<div class="top-right">top-right</div>
<div class="center">center</div>
<div class="bottom-right">bottom-right</div>
<div class="left">left</div>
</div>
NOTES: The only difference is the order of the last two divs.
Both - CSS
.container{
width: 300px;
position: relative;
},
div{
width: 100px;
height: 75px;
}
.left{
background-color: red;
float: left;
}
.top-right{
background-color: green;
height: 25px;
float: right;
}
.bottom-right{
background-color: blue;
height: 50px;
float: right;
clear: right;
}
.center{
background-color: yellow;
display: inline-block;
}
The question: How do I get rid of that white-space?
I have this code: http://jsfiddle.net/spadez/TPKLv/
<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>
I'm trying to make the right column fluid, taking up the remaining space, and the left column fixed width. Can anyone tell me what I am doing wrong with my code, and if this is the best way of doing it?
Simplest is to use display:table-cell; (IE8 and above supported )
this way, you can fix the width of one div and next div will take up the remaining space
Once added, you can even use inline native methods like vertical-align, and since its not floating, adjusting the position of divs is easy through margin and padding depending on you layout! :)
check this demo
It is most compatible and cleanest you can get for fixed width and dynamic width in a page
for calc, it is incompatible with IE9 still
if you have to use it on regular basis, create a span as below :
span.fake_width{
display:block;
width:20px;
}
then just add it to the existing layout Demo
I suggest this, with the condition always left div width is 400px. And i assume is cause you use inline-style
html
<div style="background-color:white; width: 400px;float:left;">
<span class="status" id="active"></span>Title
6
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>
css
body {background-color: gray;}
#rightCol{
width: calc(100% - 400px);
}
fiddle
The most native way of doing this is to manipulate the box model:
I've added a float to the first div, and removed it from the second one.
this way the first div is treated as an inline-block and the second one is a block, which tries hard to ignore other inline blocks.
i've updated your fiddle: http://jsfiddle.net/TPKLv/3/
<div style="background-color:white; width: 400px; float:left">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white;">
Test test
</div>
Try like this: Demo
CSS:
.container {
background-color:blue;
height: auto;
overflow: hidden;
}
.sidebar {
float:left;
background-color:grey;
width: 100px;
}
.content {
background-color:green;
float: none;
width: auto;
overflow: hidden;
}
HTML:
<div class="container">
<div class="sidebar">
<span class="status " id="active"></span>
Title
6
</div>
<div class="content">Test test</div>
</div>
UPDATED FIDDLE LINK.
As you need, I added padding and margin for the div's and its working fine.
I am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 1px;
background:green;
}
. topbar
{
background:url(topbar.gif);
position:absolute;
top: 5px;
right: 15px;
margin: 2px;
width: 1200px;
height: 100px;
}
.navbar
{
position:absolute;
float:right;
width:1200px;
height:100px;
border-style:groove;
}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}
#titlename
{
position:relative;top:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="topbar">
</div>
<div id="titlename">
</div>
<img src="title.gif" alt="title">
</div>
<div class="navbar">
<div class="button">HOME
<div class="button">ABOUT
<div class="button">LINKS
<div class="button">CONTACT
</div>
</body>
</html>
I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:
.button {
float: left;
width: 25%;
}
If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:
.button {
float: left;
padding: 0 20px;
}
There are various methods to inline the elements.
1. using Flex Method
2. using table method
3. using float method
4. using display method.
Here you can check the Demo link. includes all possibility.
You can use either use float: left; or display: inline to achieve what you want.
DEMO
Just add following style to your anchor tags:
.navbar a {
float:left;
margin-right: 15px;
}
Working Fiddle
.button{
display:inline-block;
}
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)