i have a web page with an image panel and a few div elements, with the same width, each containing an image.
I want to put them into 2 cascading columns with no spaces between them (except for the padding)
I have the following css code for image container:
.imageContainer
{
position:relative;
margin:4px 4px 4px 4px;
border:4px solid #333;
float: left;
display:inline-block;
min-height: 40px;
width: 48%;
}
This causes the columns to like like image 1 but i need the columns to look like number 2
Thank you!
EDIT:
.pg-main
{
float: left;
width: 100%;
padding: 0;
}
.entries
{
float: left;
width: 800px;
padding: 8px 20px 0 0;
}
.entries p
{
display: block;
}
.imageContainer
{
position:relative;
margin:4px 4px 4px 4px;
border:4px solid #333;
float: left;
display:inline-block;
min-height: 40px;
width: 48%;
}
Here is a possible solutions using columns -- does not work on IE9 or earlier.
FIDDLE: http://jsfiddle.net/YjHzd/
HTML
<div id="container">
<div class="block" style="height:30px"></div>
<div class="block" style="height:30px"></div>
<div class="block" style="height:70px"></div>
<div class="block" style="height:70px"></div>
<div class="block" style="height:50px"></div>
</div>
CSS
#container {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
height: 145px;
width: 80px;
}
.block {
width: 40px;
background-color: red;
margin: 0 0 5px 0;
}
Unlike many of the other solutions on this page, mine works in all semi-modern browsers, including IE 6, 7, 8, 9; Firefox 3.6 through 29, and all versions of Chrome. See below for screenshots.
If they are of fixed widths, as illustrated, just 1) wrap your boxes inside another div and 2) do the following:
Here's the JSFiddle: http://jsfiddle.net/SqQqZ/
HTML:
<div>
<div id="leftBoxesBox">
<div class="redbox"></div>
<div class="redbox"></div>
<div class="redbox" style="height: 15em"></div>
</div>
<div id="rightBoxesBox">
<div class="redbox" style="height: 12em"></div>
<div class="redbox"></div>
</div>
</div>
CSS:
div.redbox {
background: red;
width: 10em;
height: 5em;
margin: 10px;
}
div#leftBoxesBox {
position: absolute;
left: 0;
width: 12em;
}
div#rightBoxesBox {
position: absolute;
left: 13em;
width: 12em;
}
Internet Explorer 6:
Firefox 3.6:
Please post your HTML, it would help.
Maybe this will help :
clear:left;
after your 2nd imagediv. so the 3rd div can float without problems.
Basically there are only two ways to do this. You can use Javascript to determine the position of the element. Or you can create two seperate columns that have the images contained within them. Left and Right Column
Related
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
I have 5 <div> elements and they all float left.
How can I push UP my last div? (i cant use 2 more wrappers because they will be re-sized with jQuery, all 5 of them must be in same wrapper)
I don't know if I explain my problem in a right way so if you have question, please ask.
HTML:
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">3</div>
<div class="kocka220x300">4</div>
<div class="kocka460x140">5</div>
</div>
CSS:
#ModeliSadrzajAir {
width: 960px;
margin: -60px 0px 0px -10px;
min-height: 500px;
background-color: #00FFFF;
position: absolute;
z-index: 1000;
}
.kocka220x140 {
border-radius:5px;
width: 220px;
margin: 10px;
height: 140px;
float: left;
background-color: #FFFF00;
}
.kocka220x300 {
border-radius: 5px;
width: 220px;
margin: 10px;
height: 300px;
float: left;
background-color: #FF0000;
}
.kocka460x140 {
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
}
Fiddle
You've to set your .kocka220x300's float property from left to right
I also suggest you to change your html to this
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">4</div> <!-- This comes first -->
<div class="kocka220x300">3</div> <!-- This comes second -->
<div class="kocka460x140">5</div>
</div>
This way, your 3 is on the left side of 4, check the fiddle link for the update
You can try this http://jsfiddle.net/modaloda/czz2Z/9/
.kocka460x140
{
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
position: absolute;
top: 160px;
}
I tried to reproduce your example.
Basically I think you need one wrapper with position:relative; that contains all divs and make the 5th div position:absolute; and bottom:0px;. Also add overflow:auto; so that the max height you have contained in your parent div will push the parent div's height (read it again you will understand :P).
Check this fiddle:
http://jsfiddle.net/R8hJ3/1/
Have You Tried Some plugins like Grid-a-licious..
if not try it out.. Else if you need a pure Css you could have a look the link below..
jsfiddle.net/chermanarun/HaV29/
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
I am looking to create a vertically scrolling website. I'll have a set of 5 divs that I want to have a height of 100% that are stacked on one another, basically making the body 1500% in height. Yeah?
Here is my code so far:
CSS
#contentWrapper {
position: relative;
width: 600px;
height: 1500%;
margin: 0 auto;
border: 1px solid red;
}
.panel {
position: relative;
height: 6.66%;
border: 1px solid blue;
}
.panelGuts {
position: relative;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid green;
}
HTML:
<div id="contentWrapper">
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
</div>
This seems to work in Safari, Firefox, and Chrome but it doesn't work on an iPad or iPhone, and knowing how IE like's to behave, it probably won't work there either.
What I am wanting to know is 1) Why is won't work on an iPad/iPhone, 2) is there a better way to do this, maybe with jQuery?
I need each panel to have a height of 100% and have the content (panelGuts) be vertically centered. I'll be using jQuery ScrollTo (or some scrollTo plugin) to scroll to each div. I'd like to NOT have to set a specific height to each div...
Can anyone help?
I actually figured this out with HTML5. It was pretty simple. For anyone who wants to see my results
CSS
body, html {
margin: 0px;
padding: 0px;
background: #FFF;
height: 100%;
}
#contentWrapper {
position: relative;
width: 600px;
height: 100%;
margin: 0 auto;
}
.panelContainer { display: inline; }
.panel {
position: relative;
display: table;
height: 100%;
width: 100%;
background:green;
}
article.panel:nth-child(2n+2) {
background:blue;
}
.panelGuts {
position: absolute;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid black;
}
And my HTML
<div id="contentWrapper">
<section class="panelContainer">
<article class="panel">
<div class="panelGuts">
text 1
</div>
</article>
<article class="panel">
<div class="panelGuts">
text 2
</div>
</article>
</section>
</div>
And a Fiddle for you: http://jsfiddle.net/ryanjay/dwspJ/