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>
Related
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>
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
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.
How I can do this effect with <hr>? Div with content will be over <hr>. How to do that?
This is my jsfiddle: http://jsfiddle.net/fnaYs/. I don't know how to put this text into image box. Any solutions?
After, I want to add this layout to wordpress, so I want put text in <div> or another element, not in css file.
When you set the position attribute of a variable to relative, it basically means that the position of the element is relative to the browser.
So when you say top:-5px; it means you are requesting the browser to put your element 5 pixels above the position where it actually is supposed to be..
All you have to do is, set the top attribute for the div, in CSS to some negative value. like this:
<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>
Replace the -5px with your requirement...
I have coded a solution (there might be other ways).
Here is a working JSFiddle: http://jsfiddle.net/fnaYs/6/
CSS
hr.line {
padding: 0;
border: 1px solid;
color: #333;
text-align: center;
}
.box {
background-color:teal;
width:100px;
height:30px;
position:absolute;
left: 40%;
bottom:90%;
padding-top:20px;
}
HTML
<hr class="line"/>
<div class="box"> Text </div>
Here's a working jsFiddle with what you need:
http://jsfiddle.net/2LaLb/
<hr class="line" />
<div class="mydiv">Div with text</div>
and the corresponding CSS would be:
hr.line {
padding: 0;
border: 1px solid;
color: #333;
text-align: center;
}
.mydiv {
background:red;
border:1px solid red;
width:100px;
position:absolute;
top:0;left:400px;
}
As you can see it produces the result you want.
I have some basic CSS which im trying to make a post layout for a forum but i cannot get it to work.
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
This is what i have so far:
CSS
.parent{
width: 100%;
top: 10px;
position: relative;
clear: both;
color: black;
}
.line{
height:20px;
padding-left:10px;
lineHeight: 20px;
margin:0px;
border: 1px solid black;
}
.container{
width:100%;
text-align: center;
border-bottom:1px solid red;
}
.fleft{
float:left;
width:10%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
.fleft2{
float:left;
width:86%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
The HTML:
<div class="parent">
<div class="line">
<span style="float:left;">Test</span>
<span style="float:right;">Test 2</span>
</div>
<div class="container">
<div class="fleft"> Hello </div>
<div class="fleft2"> Hello Message</div>
</div>
</div>
JS Fiddle also provided:
http://jsfiddle.net/yMaqR/10/
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
You have to take into consideration the padding & margin. So if you add up width + padding + margin of the floated elements and they overflow the width of the parent, they'll be wrapped.
So a possible solution is to remove the padding and add it maybe to child elements.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
The solution is to use a clearfix
More about floats and understanding how they work.