I'm trying to align some text next to twitter's button, and have them all line up with borders. Unfortunately, the text div shrinks and floats to the upper left with its borders. The button seems fine because bootstrap properly aligns everything. But both the text and button divs suffer from padding (or margin) issues in that the borders won't line up to form a rectangle (with a border line in between the text and button div also).
This is what I'm aiming for:
The grey 1px borders are supposed to be equal all around, but I had trouble with my touchpad.
This is what I have so far:
<div class="mydiv">
<div class="row">
<div class="col-md-12">
<div class="col-sm-6">
<div class="textdiv">
Text!
</div>
</div>
<div class="col-sm-6">
<div class="btndiv">
<a class="btn" href="#">Button!</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.textdiv {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
margin: 0 auto;
}
.btndiv {
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.mydiv {
width:30%;
}
HTML
<div class="mydiv">
<div class="row">
<div class="col-md-12">
<div class="col-sm-6">
<div class="textdiv">Text!</div>
</div>
<div class="col-sm-6">
<div class="btndiv"> <a class="btn" href="#"> Button!</a>
</div>
</div>
</div>
</div>
</div>
CSS
.row {
width:250px;
margin:0px auto;
border:1px solid black;
height:75px;
background-color:#f2f2f2;
}
col-sm-6 {
width:200px;
margin:0px auto;
text-align:center;
}
div.textdiv {
border:1px solid #9a9a9a;
background-color:Aqua;
padding:5px;
color:black;
font: bold 16px arila;
width:100px;
float:left;
text-align:center;
margin-left:10px;
margin-top:25px;
margin-right:3px;
}
div.col-sm-6 a {
border:1px solid #9a9a9a;
margin:0px auto;
background-color:Aqua;
color:black;
text-decoration:none;
font: bold 16px arila;
width:100px;
padding:5px;
margin-left:3px;
margin-right:10px;
margin-top:25px;
float:right;
text-align:center;
}
Working Fiddle
Output:
I've just made some updates in the way things get their padding. Please take a looke at the followingo fiddle:
http://jsfiddle.net/WNPRA/1/
I created a new class to handle some problemns and updated the css to be more neat.
div.no-padding {
padding: 0;
}
div.textdiv {
padding: 7px 12px 7px 12px ;
text-align: center;
}
Please, do not consider the col-xs-6 classes I added. They are just to make things work on fiddle.
Here is one idea for you:
http://jsfiddle.net/panchroma/y79gm/
The html is almost exactly the same as yours except I wraped your textdiv block in .btndiv class ( to provide the border), added the class of btn to .textdiv so that it inherits the same bootstrap styling as the btn link, and I added
.textdiv{
cursor:default;
}
to force the cursor to stay as the default arrow when over the text block.
Good luck!
Related
Here is my html
.div1 {
border: 1px solid black;
height: 100px;
}
.div2 {
border: 1px solid green;
height: 100px;
}
.div3 {
border: 1px solid red;
height: 100px;
}
.div4 {
border: 1px solid blue;
height: 100px;
}
.div5 {
border: 1px solid yellow;
height: 100px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container main-content">
<div class="row">
<div class="col-md-6 div1">1</div>
<div class="col-md-6 div2">2</div>
</div>
<div class="row">
<div class="col-md-4 div3">3</div>
<div class="col-md-4 div4">4</div>
<div class="col-md-4 div5">5</div>
</div>
</div>
And output is
But my original grid system is
A margin in top and right.
How can I implement this on bootstrap grid system
You can use standard Bootstrap approach and add divs inside columns:
<div class="container main-content">
<div class="row">
<div class="col-md-6"><div class="div1">1</div></div>
<div class="col-md-6"><div class="div2">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="div3">3</div></div>
<div class="col-md-4"><div class="div4">4</div></div>
<div class="col-md-4"><div class="div5">5</div></div>
</div>
</div>
It will give you gutter between columns. If 30px is to much you can overwrite Bootstrap CSS.
To add margin-top simply, add it to the div1, div2 etc.
.div1,
.div2,
.div3,
.div4,
.div5{
margin-top: 10px;
}
Working example: https://codepen.io/paweljanicki/pen/wzdazq
I think you want to implement this for every col?
try to override the bootstrap col classes:
col-md-1 {margin: 2px 2px 0px 0px;}
col-md-2 {margin: 2px 2px 0px 0px;}
... till
col-md-12 {margin: 2px 2px 0px 0px;}
if there is no change, force it with !important.
col-md-6 {margin: 2px 2px 0px 0px !important;}
css:
.margin-right-10px{
margin-right:10px;
}
.margin-left-10px{
margin-left:10px;
}
.margin-5px{
margin-left:5px;
margin-right:5px;
}
.margin-top{
margin-top:1px;
}
js
$(".col-md-6").firstChild.addClass(margin-right-10px);
$(".col-md-6").secondChild.addClass(margin-left-10px);
$(".col-md-4").firstChild.addClass(margin-right-10px margin-top);
$(".col-md-4").secondChild.addClass(margin-5px margin-top);
$(".col-md-4").lastChild.addClass(margin-left-10px margin-top);
You can change css as you wish.
I have three divs on the same line and want to connect them with a line:
Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.
http://codepen.io/anon/pen/QwOOZp
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
margin-right: 5em;
position:relative
}
.boxItem:before,
.boxItem:after
{
content:'';
width:5em;/* size of your margin */
border-bottom:1px solid;
position:absolute;
top:50%;
}
:after {
left:100%;
}
:before {
right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
display:none;
}
.myBox {
white-space:nowrap;
/* */ text-align:center;
}
body {
}
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
<div class="boxItem">4</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
</div>
fork of your pen
Try this:
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
}
div.line {
display: inline-block;
border-top: 1px solid black;
width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>
Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz
You could add a div with the width of your margin:
<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>
CSS:
div {
display: inline-block;
}
div.emptyDiv{
border: 1px solid black;
width:25em;
}
div.boxItem {
border: 1px solid black;
padding: 1em;
}
http://jsfiddle.net/W9LXd/
I want the div under the #araclar to have it's right border stay in the same line. How can I prevent it from shifting?
CSS:
#düzenleyici{
border: 1px solid #000;
width: 600px;
height: 300px;
box-shadow: 1px 1px 4px #000;
}
#araclar{
width:auto;
height:50px;
background:#EEEEEE;
display:block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline;
border:1px solid #000;
}
HTML:
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
<div>
</div>
</div>
Change display: inline; to display: inline-block;
Use: http://jsfiddle.net/W9LXd/1/
display: inline-block instead of display-inline
Or give a specific width.
IMO there is no problem with your CSS
Your HTML is malformed, Please close the inner most div - on which you have set display:inline
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div> <!-- yOU have not closed the tag here -->
</div>
</div>
FIDDLE
I am trying to create simple horizontal stack over words while playing around with CSS and I have noticed that it is impossible to stack two divs horizontally while centering one's content when other div is empty.
Here is the example in question. I tried it in chrome.
http://jsfiddle.net/mncmN/
<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
<div style="text-align:center; display: inline-block; "> <a>Summary</a>
</div>
<div style="text-align:center; display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>
Why is that so?
To summarize, I need three things together.
1) Inline div blocks stacks horizontally
2) Text within them aligned in center(relative to parent container).
3) empty div boxes which will act as border.
Here is an updated JSFIDDLE - Is that what you are looking for exactly?
<div class="container" >
<div class="left">1</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
It is possible.
Here is the WORKING SOLUTION
The Code:
<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8); display:table;">
<div style="text-align:center; display: table-cell; background:#cccccc; vertical-align:middle; "> <a>Summary</a></div>
<div style="text-align:center; display: table-cell; background:gray; vertical-align:middle; height: 100%; border-right: solid gray 1px;">sdfsdfsdfsdf</div>
</div>
Put this in your empty div: . It's a white space. The div will still look empty, but now you can set the width and the height.
Also, try to separate the CSS from the html, like in this jsFiddle: http://jsfiddle.net/WzymM/
Please view the sample [http://jsfiddle.net/mncmN/5/][1] . Hope this was your question? `
<div style="margin: 0px; border: solid red 1px; width:100%; border-bottom: solid 1px black;">
<div style=" border: solid gray 1px; text-align:center; display: inline-block; "> <a>Summary</a>
</div>
<div style="display: inline-block; text-align:center; border: solid gray 1px;">ff </div>
<div style="display: inline-block; text-align:center; border: solid gray 1px;"> </div>
</div>`
[1]: http://jsfiddle.net/mncmN/5/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
CSS
.btns{
float:left;
padding: 2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px; // this top margin doesn't work in IE8
height:70px;
border:thin solid red;
}
here is jsFiddle
It's a known bug in IE8. There are several ways to fix it.
You can try to add overflow:auto to the clearing <div>
Check this fiddle
Try to add display:inline-block; and width how much you want hope it will solve your problem.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<!-- Adding will solve problem -->
<div id="gall"></div>
Works for me.
http://jsfiddle.net/68myJ/13/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
try this:
<div id="wrapper">
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
</div>
<div id="gall"></div>
#wrapper{
overflow:hidden;
}
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
see fiddle: http://jsfiddle.net/68myJ/17/