I have a structure like this:
HTML
<div class="cat_item">
<div class="cat_image">
<img src="/res/imyg/srm450v2.jpg" />
</div>
<div class="cat_desc">
<h2>Mackie - SRM450v2</h2>
<p>
Description Text
</p>
</div>
</div>
LESS
.cat_item {
padding:10px;
border-radius:5px;
background-color:white;
box-shadow:2px 2px 5px black;
color:black;
.cat_image {
float:left;
margin-right:25px;
padding:5px;
background-color:red;
img {
width:125px;
height:175px;
}
}
.cat_desc {
padding:5px;
}
}
Now I want the cat_item div to be changing height, so it fits the image. However only the text influences the height of cat_item div. What am I doing wrong?
It's the float. Try a clearfix CSS or set overflow: hidden to the outer div.
How to clear CSS floats without extra markup – different techniques
explained. There are three major approaches: a) Floating the
containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS
pseudo-class.
From: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
You need the following just before the last closing </div>.
<div class="clearfix"></div>
And in your CSS:
.clearfix{
clear: both;
}
Related
I'm making a form with two input area, the second area should be content editable div somehow.
I want to make the #topic_title_input sitting above the #topic_content_input with the same width. It could be easily achieved by giving them display:inline-block, But for some complicated reason, I can't change the display-inline property of the second input area
Any idea how to make the #topic_title_input sitting above the #topic_content_input?
html
<div class="left_container">
<input id="topic_title_input" >
<div id="topic_content_input" contenteditable="true" ></div>
</div>
<div class="right_container">
</div>
<div class="clear_float">
</div>
css
#topic_title_input{
width:521px;
}
#topic_content_input{
/*do not change the display:inline */
width:521px;
display:inline;
background-color: orange;
border: solid 1px black;
}
/*do not change the css below*/
.left_container{
position:relative;
float:left; width:50%;
}
.right_container{
position:relative;
float:right; width:50%;
}
</style>
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
Unnecessary white space is added to my nested divs in between .boxwrap and .lsmlbox + .rsmlbox which is making it impossible to line up .smlbox + .rsmlbox with .box
I believe this is a much more difficult problem to solve than expected?
I would like for the "inner" (referring to center of screen) margins of .lsmlbox and .rsmlbox to be dependent on screen size, but I would like the outer borders to always remain "sticky" to .boxwrap so that when the screen size changes the boxes only get narrower but remain lined up to the full sized .box div above it.
.box
{
margin-left:5%;
margin-right:5%;
margin-bottom:80px;
}
.boxheader
{
font-size:17pt;
letter-spacing:3px;
padding-bottom:10px;
text-transform:capitalize;
}
.boxcontent
{
text-align:left;
border: 1px dotted #000000;
border-top: 0px;
border-bottom: 0px;
padding-left:15px;
padding-right:15px;
letter-spacing:3px;
}
.boxwrap
{
margin:0 5%;
}
.lsmlbox
{
display:inline-block;
max-width: 30%;
margin-bottom:80px;
margin-right:4%;
vertical-align:top;
}
.rsmlbox
{
display:inline-block;
max-width:30%;
margin-bottom:80px;
margin-left:4%;
vertical-align:top;
}
HTML:
<div class="box">
<div class="boxheader">SLDKFJSDLFKJSDLKJF.</div>
<div class="boxcontent">
SDFSDFLSDFSDFLKJ
</div>
</div></div>
<div class="boxwrap">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">SDFSDFSDF</div></div>
<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDFSDF
</div></div>
</div>
Edit: got rid of floating divs but now I'm in a deeper problem.
it really depends on what you want it for, but you could use:
display: inline-block;
on each item you want on the same line
You can also use position:absolute;. For your case just remove the float in both .lsmlbox and .rsmlbox and put this in your .rsmlbox:
.rsmlbox
{
position:absolute;
top:8px;
left:700px;
margin-right:20%;
width:27.5%;
margin-bottom:80px;
}
Hope this helps!
You can use float without breaking your layout by wrapping your code in a container.
CSS
.clearfix {
position:relative;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
HTML
<div class="clearfix">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">
SDFSDFSDFSF
</div></div>
<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDF
</div></div>
</div>
It depends. In some cases float is good.
In some - inline-block. I personally like inline-block.
You can read more about it here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://jsbin.com/qikubuce/1/edit?html,css - sample
Yes, display-block is the better way to go. Float was originally intended for images.
Here is a fiddle that demonstrates using inline-block
I have added a class name of box for the two boxes, and changed their current class names to ID's instead:
.box{display:inline-block;}
#lsmlbox{}
#rsmlbox{}
By using one class name for the two boxes will help reduce the need to write duplicate rules.
Another thing you may want to do, is change the inner <div>'s to paragraphs instead. You could then define a standard rule for them using the following css:
.box p{padding:10px;color:#333;etc....}
Here's an updated fiddle demonstrating that.
Hope this helps.
.block
{
width:540px;
margin:20px;
padding:10px;
border:1px solid Gray;
}
<div id="header" class="block">
<div id="pe" class="text">
<b>Name :</b> <span>King</span><br />
<b>Surname :</b> <span>Kong</span>
</div>
<div id="area" class="text">
<span id="city">Abcs</span><b>/</b>
<span id="state">Bcsdf</span>
</div>
</div>
If u run the above code in Jsfiddle, then it shows a border around the text and the important thing is that the height of the block class is auto, so it automatically adjust its height.
But the problem comes when i added the following css :
#pe
{
float:left;
}
#area
{
float:right;
}
Now the height of div.block is not set automatically. Can anybody tell me the problem?
add float:left; in your block class.
Now You need a Clearfix for it
.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
you add it like this
"<div id = "header" class="block clearfix"></div>"
because float takes them out of the current flow. They are not inside the block div in the same way they where, use positioning and display:inline to get them to line up the way you want
You can use absolute positioning where by the outer element is set to height:auto and the inner #pe and #area are set to height:100%.
Have a look at this answer: How to make a floated div 100% height of its parent?
That's because they're not part of the common flow of the document anymore.
The solution could be to set display: block in the block class and then use position: absolute to position the element within that block by using left: 0 and right: 0
Just add overflow:hidden to class "block".
.block{
width:540px;
margin:20px;
padding:10px;
border:1px solid Gray;
overflow:hidden;
}
Here is the fiddle: http://jsfiddle.net/rWuBF/
I would add overflow:hidden to the containing element (#header). That should fix it.
Although a bit dirtier, you can also add something that clears both after the floated elements.
<div id="header" class="block">
<div id="pe" class="text"> ... </div>
<div id="area" class="text"> ... </div>
<div style="clear:both;"></div>
</div>
There are also cleaner "clearfix" variations of this as well, that will let you clear:both without adding non-semantic markup.
http://www.positioniseverything.net/easyclearing.html
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.