I'm working on a simple little project right now and I can't seem to figure out the styling.
Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.
The boxes are inserted dynamically with jQuery and their positions can change frequently.
Here is a jsfiddle to demonstrate.
HTML
<div class="main">
This is okay
<div style="top: 25px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 100px;" class="sub">
<h3>
test
</h3>
</div>
<div style="position: absolute; top: 200px;">
This is the problem
</div>
<div style="top: 250px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 260px;" class="sub">
<h3>
test
</h3>
</div>
</div>
CSS
.main {
background-color: grey;
height: 700px;
}
.sub {
border: thin solid black;
position: absolute;
}
you may make the sub div's inside other div and give this one absolute position
.main {
position:relative;
background-color: grey;
width:100%;
height:auto;
}
.sub {
position: absolute;
top:100px;
width:100%;
}
.child {
border:2px solid black;
width:500px;
height:500px;
margin:10px auto;
}
<div class="main">
<div class="sub">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
if you want them horizontally add to .child
float:left;
width:47%;
margin:1%;
As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.
Related
I am writing an html calendar and got stuck on positioning divs. I generate the divs dynamically and they stack on top of each other which is ok most of the time. Some times I need to create a div and have it placed at the top of the page right next to the first created div. If I use float it moves over too far and does not go to the top. I could use position to accomplish this, but it gets complicated. Just seems it should be easy to drop it up to the top like it would in a table using valign=top. I added some css positioning to show where I want the div, but if possible, I would like to do it without position. Any suggestions on good ways to position a div would be much appreciated.
#container{
width:200px;
height:200px;
background-color:blue;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
float: right;
position:relative;
top:-100px;
left:-100px;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
</div>
Let's call the calendar tiles "source divs", and for the div you want to appear positioned to the right of the 1st "source div", we'll ascribe the term "target div".
I recommend that you position your target div inside of the source div. This semantic relationship will make it very easy to position the target div correctly, using left: 100%;:
.calendar { font-size: 0; }
.src {
position: relative;
font-size: 14px;
display: inline-block;
width: 30px; height: 30px;
outline: 1px solid #000;
}
.src:hover:after {
content: "";
position: absolute;
display: block;
width: 100%; height: 100%;
left: 100%; top: 0;
background-color: #ff0000;
}
<div class="calendar">
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
</div>
Hover any source div to see the corresponding target div.
Perhaps you should look at using a grid layout in the cell . you would have much better control of how the content appears in the cell without having to work with floating div's .Also a layout in a grid container keeps things uniformed and prevents overlapping using
grid-template-columns: auto auto auto;
If you only want 2 columns at the top just change it to
grid-template-columns: auto auto ;
here is a link grid layouts
and
flexbox vs grid
#container{
width:200px;
height:200px;
background-color:blue;
display: grid;
grid-gap: 2px;
grid-template-columns: auto auto auto;
grid-template-rows: 60px auto auto;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
<div id=item3></div>
<div id=item3></div>
<div id=item1></div>
<div id=item1></div>
<div id=item1></div>
</div>
I'm trying to center 3 social-media icons side by side. but couldn't figure out how to do it.
<div class="maintext flipInX animated">
<div class="socials wow bounce animated" data-wow-delay="1s">
<img src="http://s33.postimg.org/yitnj0vbz/fblogo.png"/>
<img src="http://s33.postimg.org/r7peysh3z/github.png"/>
<img src="http://s33.postimg.org/lq7vvi8wv/linkedin_3_32.png"/>
</div>
</div>
Use text-align: center
.socials {
text-align: center;
}
<div class="maintext flipInX animated">
<div class="socials wow bounce animated" data-wow-delay="1s">
<img src="http://placehold.it/50"/>
<img src="http://placehold.it/45"/>
<img src="http://placehold.it/50"/>
</div>
</div>
See this fiddle
Make the <a> inside the .socials div inline-block element which gives it a property as that of text. And, then add text-align:center to the parent, ie the .socials div.
Add the below given CSS to make it centered
.socials{
text-align:center;
}
.socials a{
display:inline-block;
}
UPDATE
As, #LGSon mentioned in his comment,
An inline element does not need to be set to inline-block to center
itself when the parent has text-align: center
you just need to add the below given CSS to make it centered.
.socials{
text-align:center;
}
But, please do keep in mind that you have to set the display of any block level elements to inline-block if it needs to be centered using the above said method.
Flexbox is great for centering things both horizontally and vertically:
img { height:40px; width:40px; background-color:gray }
.socials {
display: flex;
justify-content:center;
}
.socials img {
flex: 1 auto;
}
<div class="maintext flipInX animated">
<div class="socials wow bounce animated" data-wow-delay="1s">
<img />
<img />
<img />
</div>
</div>
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
A bit of a strange request, I know.
I have a jQueryMobile page, a simple one as you can see:
<div data-role="page" class="type-home" id="home">
<div data-role="header" data-theme="b">
<h1>Our Tools</h1>
</div>
<div data-role="content">
<ul data-role="listview">
......
I need to put a Div containing a 100 px high content at the very top, outside any styling or div that jQuery Mobile uses.
How would that be done, as adding a plain Div as is just gets covered by jQuery Mobile.
I can't use an iFrame, it has to be all on one page in html.
If you are wanting a static header-type DIV, this is what works for me.
I put a "header" with fixed height and then offset the "content" with a margin-top like below. .ui-content is a class that is added automatically by jQM.
HTML:
<div data-role="page" id="somePage">
<div class="ui-bar ui-bar-b">
<a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
<h1>Some header</h1>
</div>
<div data-role="content">
<div id="someDiv">
</div>
</div>
</div>
CSS:
.ui-bar {
position: fixed;
height: 100px;
z-index: 10000;
width: 100%;
padding: 0px 5px;
box-sizing: border-box;
}
.ui-content {
position: relative;
padding: 10px;
margin-top: 100px;
}
I've got this html (simplified)
<div class="outer" style="float:left">
<div class="inner" style="float:left">
<div class="contained" style="clear:both">...</div>
<div class="contained" style="clear:both">...</div>
<div class="contained" style="clear:both">...</div>
</div>
<div class="inner" style="float:left">
<div class="contained" style="clear:both">...</div>
<div class="contained" style="clear:both">...</div>
<div class="contained" style="clear:both">...</div>
</div>
</div>
the "inner" divs are resizable vis jQuery:
$(".contained").resizable({
maxHeight: "27px"
});
The behavior I'm looking for is to have the "outer" div sprout horizontal scrollbars when one or more of the "inner" divs is resized. Here are the classes on inner and outer in my .css file:
.outer {
width: 1000px;
height: auto;
}
.inner {
display: block;
width: auto;
margin: 2px;
z-index: 2;
}
Some of those css values are "sacrificing the chicken" things--meaning I was getting desperate and throwing darts at it.
If you need any further details, please let me know.
thanks!
I guess you want this behaviour
I used overflow:scroll property on inner div
Is this what you want?
.outer {
overflow:auto;
}