When I enter more than one line of content in the 'wrap' div it creates vertical space at the bottom of the div. How can I prevent this?
Screen shot
JSFiddle
HTML
<div id="widgets">
<div id="wrap">
<h1 class="name" >Models</h1>
<li>Rename a column</li>
<li>git add all new or modified files</li>
<li>Heroku assets:precompile plugin </li>
<li>Heroku tail logs</li>
<li>Rename a column</li>
<li>Heroku load db:schema </li>
<li>Heroku: connect to database </li>
<li>Postgres: show tables</li>
<li>git switch to a branch </li>
<li>add records from console </li>
</div>
</div>
CSS
#widgets {
margin: 15px 0px 50px 15px;
text-align: center;
}
#wrap {
margin: 15px 15px 0px 0px;
text-align: left;
width: 300px;
height: 300px;
padding: 1px 20px 5px 20px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
}
#Arman P.'s answer works, but if you want to keep using your inline-block method instead of floats like you are now, you can just add this:
#wrap {
vertical-align: top;
}
Simply add float: left to your #wrap css declaration. Updated jsFiddle.
#wrap { float: left; }
Related
The app (RoR) shows a set of rows with posts info. Each row has the title aligned to the left and date aligned to the right.
I need to have a link working over all the row, not only over the text.
If I don't use float, the link works properly over all the row but I cannot establish a margin-top. If I use float, the margin-top works OK, but then the link only works over the text.
I don get what the issue is. Any ideas?
This is my css:
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 40px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
}
.post a span.title{
float: left;
margin-top: 7px;
}
.post a span.date{
float: right;
margin-top: 7px;
}
I assume your html structure is like this:
<div class="post">
<a href="#">
<span class="date">date</span>
<span class="title">title</span>
</a>
</div>
Note: I moved the date up and title down, because we're going to make the first one to float right. You can then use margin or padding as needed.
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
padding: 10px 0;
}
.post a span.date {
float: right;
}
DEMO: http://jsfiddle.net/42vdh6bL/
Trying to display a list of upcoming events, showing the date(s), an icon, and a brief description. All of these should line up side by side, like columns, but when the description wraps, it falls down to the next line. This is probably insanely simple, but I've tried various combinations of float and inline-block with no success.
<div class="events">
<ul class="list-unstyled">
<li>
<div class="event-date">Jun 16 -
<br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>
<div class="event-text">Opening Day for Faculty and Staff</div>
</li>
<li>
<div class="event-date">Sep 10 -
<br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. # Cafeteria Courtyard</div></li>
<li>
<div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}
http://jsfiddle.net/d4h2A/1/
Using your existing HTML (good as is), try the following CSS:
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 2px solid #4188d6;
margin-bottom:10px;
overflow: auto;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
float: left;
}
.event-text {
overflow: auto;
border: 1px dotted gray;
}
i {
float: left;
vertical-align:top;
border:1px solid red;
margin-right: 10px;
}
See demo: http://jsfiddle.net/audetwebdesign/y54Zb/
To allow for a fluid width of .event-text, start by using float: left for .event-date and i (optinally, add a right margin as needed).
To contain the floated elements within the li blocks, use overflow: auto.
Finally, apply overflow: auto for .event-text to keep the text from wrapping around the floated elements.
The net result is that as you shrink the window width, the text will start wrapping at the left edge next to the icon. As you expand the window, the text will simply stay on a single line for a wide enough window (use max-width if this is an issue).
You might want to set a min-width for the text block depending on your layout design.
I have this problem. I searched the site and others were having similar problems, but none of the answers seemed to work. Those included setting line-height to 0px; and setting all margins/paddings to 0px. I use Google Chrome's Inspect Element material to check the margins/paddings. I hovered over my "a" element and "li" element to see if they had any unnecessary paddings or margins, but they didn't.
What was weird is that they had a little white space, not occupied by any element in the entire document, between each link.
Right now, as there are no borders between the text, it is unrecognizable, but the space around the "a" in Link4 is smaller than the space around the text in Link1. The width of the first "li" element is strangely 4px wider than the 4th "li" container, and there is a little white space. I want to get rid of the white space, any ideas?
Here is the code:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML document:
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
Anything helps! Thank you very much!
there are some spaces when you put <li> to new line. so one solution is to add them all in same line like here: http://jsfiddle.net/6tzxj/1/
I'm using JQuery's sortable (as grid) to be able to sort divs, the first of which is approximately three times as wide as the rest. I want to display them in just two rows, which Chrome and Firefox have been able to do just fine, but Safari is displaying them sort of like this:
BIGDIV
DIV DIV
DIV DIV
DIV DIV
By the way I'm doing this in rails which will explain my code below:
<ul id="sortable" style= "width: 1050px; height: 625px;" >
<li id="newspod" style="width: 610px;">
<div class="pod" style="width:598px;">
<div id="header" style="width: 598px">NEWS</div>
</div>
</li>
<% #pods.each do |podli| %>
<li class="ui-state-default">
<div class="pod">
<div id="header"><%= podli.name %></div>
</div>
</li>
</ul>
I removed a little to make it more readable. Also, here's my CSS:
#sortable { list-style-type: none; margin: 20px 10px 10px 10px; padding: 0;}
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 294px; font-size: 4em; text-align: center; }
.pod {
width:188px;
height:282px;
background-color:#FFFFFF;
/********** CSS 3 **********/
box-shadow:3px 3px 10px #000;
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow:3px 3px 10px #000;
}
Thanks so much for any help.
I am having trouble aligning some DIV's on a comment system. Below is my current CSS code and the html along with a photo to show the problem.
In the photo the delete part on the right side of the first comment is positioned at the bottom of the comment and I need this div to be at the top. Also if you look in the second comment you will see the delete text isn't even on the right side, it is under the first div
Can someone help me to position it correctly?
alt text http://img2.pict.com/91/04/e8/1487396/0/800/screenshot2b17.png
<style type="text/css">
ol.commentlist {
margin-right:auto;
margin-left:auto;
padding: 0;
list-style-type: none;
width: 950px;
}
ol.commentlist li {
float: left;
margin: 0;
padding: 10px 0px 10px 0px;
width: 950px;
}
div.commenttext p{margin:0;}
/* Makes even number comments have a different background color */
ol.commentlist li.thread-even {
background:#f6f6f6;
border-top:1px solid #e3e3e3;
border-bottom:1px solid #e3e3e3;
}
/* Left column with teh comment posters info and photo */
ol.commentlist li div.photocolumn {
display: block;
float: left;
width: 120px;
padding: 0px 0px 0px 15px;
}
/* Center column with the comment data */
ol.commentlist li div.commentcolumn {
position: relative;
float: right;
margin: 0 0 15px 0;
padding: 0 80px 0 30px;
min-height: 53px;
width: 700px;
border-left: 1px solid #dfe5e7;
overflow: hidden;
}
/* Right side cloumn with moderation links */
ol.commentlist li div.modcolumn {
display: block;
float: right;
width: 50px;
padding: 0px 0px 0px 0px;
}
</style>
<ol class="commentlist">
<li>
<!-- left column of the comment for user photo -->
<div class="photocolumn">
A photo goes here
</div><!-- END left column -->
<!-- CENTER column of the comment -->
<div class="commentcolumn">
<p>02/12/3009</p>
<p>Being new to web design, I use to have those same bad habits of starting things directly into photoshop!</p>
</div> <!-- END right comment column -->
<!-- Far right moderation column -->
<div class="modcolumn">
Delete
</div> <!-- END moderation -->
</li>
</ol>
Add vertical-align: top; to each of your divs.
Change those float: rights to float: left
Add text-align: right to get the contents of a div to align right.
Also, there's a new StackOverflow-affiliated website for HTML/CSS/Web Design at http://doctype.com/