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.
Related
I am creating a set of "step" divs to show progress through a page and I want these two divs to sit flush against each other but they have a couple pixels between them. I thought margin and padding 0px would of fixed it but it does nothing.
I would like to achieve this without adding minus properties to the CSS
EXAMPLE
CSS:
.step {
width: 20px;
height: 20px;
background: white;
border: 1px red solid;
display:inline-block;
padding:0px;
margin:0px;
}
.line {
height:1px;
width:20px;
background:#717171;
border-bottom:0px solid #313030;
display:inline-block;
padding:0px;
margin:0px;
}
HTML:
<div class="step"></div>
<div class="line"></div>
Change your markup to this:
<div class="step"></div><!--
--><div class="line"></div>
As inline-block elements leaves space in between so this might be a hack for the same.
You can see the reference here with explanation.
Or
You can make it in one line
<div class="step"></div><div class="line"></div>
Demo
Demo 2
Write this way http://jsfiddle.net/aLs2b/3/
<div class="step"></div><div class="line"></div>
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;
}
I'm trying to create few divisions and apply different background for each division but my code is not working as expected.
HTML
<div class="main">
<div id="div1">Im in div-1</div>
<div id="div2"></div>
<div id="div3"></div>
</div>
CSS
.main{
background-color:red;
}
#div1 {
height:200px;
width:100px;
float:left
}
#div2 {
height:200px;
width:500px;
float:left
}
When I set the background color for each id, it's working as expected but when I set for the class it's not working.
It works, you don't see it because your floating divs are not wrapped by the parent.
Add overflow:hidden to the parent div
Fiddle
Here U can achieve this by using floated divisions (divs) clearing without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation.
Read this
http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/
http://css-tricks.com/snippets/css/clear-fix/
Try this -
<div class="main clearfix">
<div id="div1">Im in div-1</div>
<div id="div2"></div>
<div id="div3"></div>
</div>
In your CSS - Add this
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
DEMO
You need to add overflow:hidden; to the parent div, so it should look like this:
.main{
overflow: hidden;
background-color:red;
}
I have 2 DIVs:
<div id="sidebar"></div>
<div id="content"></div>
How would i make the sidebar div stretch the same height as the content.
Thanks for any help.
UPDATE:
Here is my example code with other elements:
http://tinkerbin.com/tkp2FZLZ
it has a content DIV in the Middle and 4 divs that makes border which is a different color.
You can easily get your desired results through display:table-cell;
HTML
<div id="sidebar">sidebar</div>
<div id="content">content</div>
CSS
#sidebar {
display:table-cell;
width:100px;
background:red;
}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}
i think you are looking like this ;-
http://tinkerbin.com/yqyX3mXg
try this
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
Use display: table-cell on both column.
That will (visually! and visually only. It's CSS) make them behave the same way as th/td cells. You can add table-layout: fixed; display: table on parent and some width on one or both columns to use the other table algorithm, the one that doesn't try to adapt to content but try to respect the widths YOU want.
HTML:
<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>
CSS:
#sidebar, #content {
display: table-cell;
}
EDIT: compatible with IE8+
You'll have to use inline-block for IE6/IE7 ... that they don't understand (ha!). display: inline; zoom: 1 is the alternative for them, or you can also float these columns and use a technique named faux-column (tl;dr the background is on the parent and it's a visual fake, it appears to be on each column but it isn't)
EDIT2: vertical-align: top is also often required for such layout columns.
Set the same height for them, you could possibly even give them a float.
By the way you have a bug in your html, write it like so:
<div id="sidebar"></div>
<div id="content"></div>
And the css:
#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}
#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}
Example
.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