I have this problem: http://jsfiddle.net/5bpwckot/
As you can see, if a div is larger than the other, the other gets down.
I'd like to keep the two divs in place, regardless of the top div..
I was wondering if I could do something like float:top;
Thanks :)
Here is the code:
HTML:
<div style="display:inline-block;">
<div id="halftitle" style="float:left;">Last posted threads</div>
<div id="halfbloc"> Thread
</br>by Username, 1 hour ago.</div>
</div>
<div style="display:inline-block">
<div id="halftitle" style="float:left;">Last users registered</div>
<div id="halfbloc">
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User3
</br>3 hours ago
<div class="sep"></div>
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User2
</br>3 hours ago
<div class="sep"></div>
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User1
</br>4 hours ago
</div>
CSS
#halftitle {
background-image:linear-gradient(to top, #0e75ba, #021c55);
padding: 2px 5px;
font-size: 13px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #000;
color: white;
margin-left: 15px;
margin-right: 15px;
width:241px;
position:relative;
}
#halfbloc {
background-color: #f7fafb;
padding: 5px;
font-size: 13px;
margin-right: 15px;
margin-left: 15px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 8px;
width:241px;
clear: both;
position:relative;
}
/*ignore this*/
.sep {
margin-top:2px;
margin-bottom:2px;
border-bottom: 1px dotted #000;
}
just include vertical-align:top; to get this fixed
HTML
<div style="display:inline-block; vertical-align: top;">
Fiddle Demo
Related
I was wondering how I could round off the edges on this?
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
<h2>This site is not yet finished!</h2>
</div>
Thanks, Jeremy.
Use border-radius Example:
border-radius:10px;
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center; border-radius:10px;">
<h2>This site is not yet finished!</h2>
</div>
I think it is possible to unset this element to not block space, but i don't know which CSS code to do that. Below is my code:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
All I want want is like this image
So if anyone can please help me. Thank you in advance.
Float the divs to the right and add clear:both. You'll need to use a clearfix so that the floats are contained...here I used overflow:hidden on the parent wrapper.
.customLabel {
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
overflow: hidden;
}
.customLabel>div {
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
float: right;
clear: both;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi</div>
<div class=''>god</div>
</div>
You can set display:inline-block and add breaks <br> if you want to go next line:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
.notblock{display:inline-block}
<div class="customLabel">
<div class='notblock'>hello</div><br>
<div class='notblock'>hi hi hi hi </div><br>
<div class='notblock'>god</div><br>
</div>
Here's one way to do it. I am using the CSS Flexbox to accomplish this. It has real good browser support as of now so this shouldn't be a problem.
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
display:flex;
flex-direction:column;
align-items: flex-end;
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
Read more about Flexbox here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}
As you can see on the example picture, there is some type of white space above the "news" header (padding? margin?) I have tried messing around with padding-top, margin-top but nothing I did would get rid of the white space. Thanks!
HTML:
<div id="news_wrapper">
<div id="newsheader">
<p>News</p>
</div>
<div class="news">
<p>"News Post 1"</p>
</div>
<div class="news">
<p>"News Post 2"</p>
</div>
<div class="news">
<p>"News Post 3"</p>
</div>
<div class="news">
<p>"News Post 4"</p>
</div>
</div>
CSS:
#news_wrapper {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 650px;
height: auto;
margin: 6px;
}
#newsheader {
background-color: Black;
color: white;
width: auto;
margin: 0px;
height: 30px;
text-align: center;
font: 'Helvetica', sans-serif;
text-transform: bold;
}
.news {
display: block;
margin: auto;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 4px;
}
add this to your css
#newsheader p{
margin:0;
}
I believe the issue is with your margin: auto
I generally use margin: 0 auto for this effect.
So I have this piece of html:
<div id="navigation">
<img class="navLogo" src="images/navlogo.png" />
<h3 class="navTalk">Routes and Maps</h3> <br />
<p class="navtext">Get routes, stop times,and maps</p>
</div>
<div id="fares">
<img class="navLogo" src="#" />
<h3 class="navTalk">Fares & Costs</h3>
<p>Get info on fares and trip costs</p>
</div>
<div id="alerts">
<img class="navLogo" src="#" />
<h3 class="navTalk">Service Alerts</h3>
<p>Find disruptions and delays</p>
</div>
With this CSS:
#navigation {
float: left;
border: 1px solid black;
background-color: #d69f0f;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 210px;
}
#fares {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 200px;
}
#alerts {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
width: 200px;
}
#navigation h3 {
color: #fff;
}
#navigation p {
font-size: 8pt;
color: #fff;
padding-left: 4px;
}
#fares p {
font-size: 8pt;
color: #fff;
}
#fares h3 {
color: #fff;
}
#alerts p {
font-size: 8pt;
color: #fff;
}
#alerts h3 {
color: #fff;
}
#tripplanner {
float: left;
}
Everything looks like I expect it to look, except the paragraph doesn't start on the line below the h3 tag. Instead, the paragraph starts after the h3 and wraps to the next line. I also can't seem to get the paragraphs to accept padding, and it's pushing right up against the right side of the icons I'm using. I'm at a complete loss for why this is happening. I'm sure there is an easy solution, but I'm lost. Any help would be greatly appreciated.
Remove the BREAK tag:
<h3 class="navTalk">Routes and Maps</h3> <br /> <--- here.