Im using a set of layers, with this CSS
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.eventCat {
float: right;
width: 5px;
height: 100px;
}
to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?
I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)
It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;
.wrapper {
position: relative;
}
.eventCat {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
}
.left2 {
padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}
Example fiddle
you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.
The easiest way to fix this is set a negative top margin to your green div:
.eventCat {
margin: -100px 0 0 0;
float: right;
width: 5px;
height: 100px;
}
Example Fiddle
Your issue is fixed, please check the code here:
<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>
and here is your HTML
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
What you have to do there is to replace you div.eventCat with div.left2 that's it :-)
Fiddle : http://jsfiddle.net/KRU9U/
Cheers
Put the eventCat (the element you want to float to the right) as the first element under wrapper.
Related
I have 2 div's, one after the other. When i move first div with postion: relative and top: -60px it creates gap between them.
Here is example: https://codepen.io/dusannis/pen/oNgBpoK
As you can see there is gap between red and yellow div. Is there some css property that I can add to parent div that can remove this gap, or something simillar?
This is HTML:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
This is CSS:
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
Use negative margin instead of relative positioning.
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
/* position: relative; --> not required */
margin-top: -50px;
/* change this */
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
Codepen Demo of the effects of various methods of "moving" elements:
"Relative Position vs Margin vs Transform".
You can try add same top/position to the second div:
.div-1 {
padding: 60px;
position: relative;
top: -60px;
background: red;
}
.div-2 {
position: relative;
top: -60px;
height: 50px;
background: yellow;
}
Alternatively you can add internal div and use padding for that one, then get rid of padding for the parent and the body (or adjust to the real value if you want it):
<body>
<div class="container">
<div class="div-1">
<div class="div-1-inside">
something here
</div>
</div>
<div class="div-2"></div>
</div>
</body>
body {
background: blue;
padding: 10px;
}
.div-1 {
position: relative;
background: red;
}
.div-1-inside {
padding: 60px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
I am trying to solve this layout puzzle but am stuck in how to get it as elegant, clean and timeless.
Given:
- a horizontal line of 1 pixel height stretching inside the container its in
- a vertically as well as horitontally centered box over this line
- a left aligned textbox
- and a right aligned text box
What I have tried, is painstackingly increment the percengates untill I reached some kind of a middle... warning, disclaimer, the following code is very graphical and ugly!
CSS
author{color: grey}
box{float: left;
background: blue;
margin: 0 0 0 46.4%;
...
/* bad coding feel embarrassed showing this */
}
time{color: grey}
HTML (flexible and please change if needed)
<author></author>
<box><img src=""/></box>
<time></time>
I first thought this might be solved in flexbox, using justify-content: space-between however, I cannot figure out how to make the line appear there. So I am open for any suggestions wether its the good old positioning/float or with flexbox. Maybe it would be nice to try to solve it both ways and see which one is the most elegant? Thanks in advance!
Here is one way to accomplish that, where you use justify-content: space-between to align the author/box/date and an absolute positioned pseudo element to draw the line
#wrapper {
position: relative;
display: flex;
justify-content: space-between;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#wrapper > * {
position: relative; /* instead of 'z-index: -1' on the pseudo so
the line stays below the items */
}
#author {}
#date {}
#box {
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
Updated based on a comment
The #wrapper > * rule can in this case be replaced with setting position: relative on the box, which I recommend in favor of giving it a z-index.
Updated based on a 2nd comment
As you have issues with the combo Flexbox/script, here is one version without, with the same markup and an almost as short CSS
#wrapper {
position: relative;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#author {
position: absolute;
top: 0;
left: 0;
}
#date {
position: absolute;
top: 0;
right: 0;
}
#box {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
I think the below snippet provides a framework to do what you want to do. This uses flex boxes to hold three columns of divs (the left, the right, and the square). By setting the width of the square, the other two elements in the flex will fill the space. Left and right align settings are set in paragraph elements within divs.
This is by no means a very tidy solution, but does show how it can be done.
.column {
display: block;
width: 150px;
}
.square {
display: inline;
width: 30px;
height: 30px;
margin: auto 0;
background: blue;
}
.top {
display: block;
height: 50%;
border-bottom: solid black 2px;
}
.bottom {
display: block;
height: 50%;
}
.banner {
display: flex;
padding: 5px;
}
p {
margin: 0;
line-height: 15px;
font-size: 0.8em;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
<div class="banner">
<div class="column left">
<div class="top left">
<p class="left-text">
Author
</p>
</div>
<div class="bottom left">
</div>
</div>
<div class="square">
</div>
<div class="column right">
<div class="top right">
<p class="right-text">
Month Year
</p>
</div>
<div class="bottom right">
</div>
</div>
</div>
Try something like this. Fiddle
#line{background: #000; height:1px; margin-top:40px;}
.alignleft {
float: left;
text-align:left;
width:33.33333%;
}
.aligncenter {
float: left;
text-align:center;
width:33.33333%;
}
.alignright {
float: left;
text-align:right;
width:33.33333%;
}
.box{background:blue;margin:auto;width:40px;height:40px;display:block;margin-top:-20px;}
<div id="line">
<p class="alignleft">Author</p>
<div class="aligncenter"><div class="box">
</div></div>
<p class="alignright">month/year</p>
</div>
<div style="clear: both;"></div>
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 feel like this is such an idiotic question, and the little things in css always get me. Anyway, I have a design, and I'm trying to do 2 columns. One (which is a sidebar of 300px) which is at the right, and the other column should fill the remaining space.
As you can see the sidebar is put under the div on the left.
HTML:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
CSS:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
thanks for any help, Jake.
Floating elements should appear first in the html:
<div class="wfix">
<div class="col-fix">
<div class="col-side"></div>
<div class="col-lg"></div>
</div>
</div>
Demo
I have a container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>