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/
Related
My sidepanel doesn't float right properly. It acts (for some reason) as if there's a top margin, it refuses to align next to the page title.
I'm also attempting to make it responsive using <aside>
It should be here:
My main content sits in a max-width:1050px, the rowSidepanel should make a column of width:60%, I assumed the sidebar would too make a column of width:27%; float:right; all within that pageArea.
I've inspected element and tried to force top:0; etc but it is still not behaving itself.
Does anyone know what I am doing wrong? .
HTML
<div id="pageArea">
<div class="colPad">
<div class="rowSidepanel">
<!-- InstanceBeginEditable name="main content" -->
<div class="breadCrumb"> Home <span style="font: Georgia;"> > </span> Repertoire</div>
<h1>Repertoire</h1>
<p class="introPara">Intro</p>
<p>Main content....</p>
<!-- InstanceEndEditable -->
</div>
<aside id="sidebar">
<div class="sidepanelArea"> Sidepanel </div>
</aside>
</div>
</div>
<div class="clearBoth"></div>
CSS
#pageArea {
max-width: 1050px;
margin: 0px auto 0px auto;
padding: 134px 0px 0px 0px;
display: block;
background-image:url("/images/common/centered-page-bg.jpg");
background-repeat: no-repeat;
background-position: 0% 12%;
min-height: 667px;
z-index: 1;
overflow: hidden;
position: relative;
}
.colPad {
padding: 0px 15px 0px 15px;
}
.rowSidepanel {
width: 60%;
}
aside {
float: right;
padding: 1%;
width: 27%;
margin: 0% 0px 20px 0px;
background-color:#000;
color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
#media all and (max-width : 799px) {
#sidebar {
width: 99%;
padding: 1% 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-top: 3px solid #dc1b20;
background-color: #FFF;
color: black;
}
}
Your .rowSidepanel is displayed block and no matter of his width he is assigned to be across all screen. Just make him float: left;
.rowSidepanel {
width: 60%;
float: left;
}
Your #breadcrumb, repertoire header, and paragraph element are all block elements and are thus taking up the entire width of the browser (and pushing down your sidebar).
You should group those other elements into a container div of their own and flow that left. Apply background colors to both divs (the one floated left and the one floated right) to visualize what you're doing.
Try changing the div order, #rowSidepanel before #sidebar.
http://codebins.com/bin/4ldqosu
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/
Layout.cshtml
<section id="main">
<div id="sidebar">
#{Html.RenderAction("CategoryMenu", "Store");}
</div>
<div id="content">
#RenderBody()
</div>
</section>
style.css
...
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
overflow: hidden;
}
#sidebar {
display: block !important;
width: 15%;
float: left;
font: bold 20px arial, verdana;
background: green;
height: inherit !important;
}
#content {
display: block !important;
float:none;
}
...
I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?
Sidebar is floating left, so it will be taken out of the DOM flow and set up to the left. If you don't want #content to appear next to it then you need to add clear: both to #content style. That will force it to clear any floats around it and appear on the next line. However, it will not stop #sidebar from floating and there will be nothing next to the sidebar.
Can you clarify what you are trying to do since you are specifically setting #sidebar to float:left but then asking how to make them not float.
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; }
I've got three div elements within one class, which in html document it looks like that:
<div class="content">
<div id="content_head">
<!--CONTENT HEAD CODE-->
</div>
<div id="between_ads">
<!-- ADS HERE -->
</div>
<div id="content_middle">
<!--CONTENT MIDDLE CODE-->
</div>
</div>
And css code for these:
.content
{
position: relative;
width: 75%;
float: left;
left: -52px;
margin: 5px 0 10px 0;
border-right: 1px solid #D9D9D9;
}
.content #content_head
{
/*position: relative;*/
width: 100%;
float: left;
border-bottom: 1px solid #D9D9D9;
}
.content #content_middle
{
/*position: relative;*/
width: 100%;
float: left;
margin: 5px 0 0 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
/*BETWEEN ADVERTS*/
.content #between_ads
{
position: static;
width: 100%;/*737px;*/
height: 10px;
/*margin: 302px 0 0 -17px;*/
margin: auto;
padding: 0;
background: #000;
}
/*BETWEEN ADVERTS*/
The problem is, that resulted code for BETWEEN ADVERTS looks like this:
http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here:
http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.
Setting .content to position: absolute and rest to relative brakes totally the layout of .content class.
I'm quite new to html and css and still not everything understand.
Cheers
Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.