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/
Related
i have the following set up
HTML
<div id="wrap">
<div id="box1" class="list"></div>
<div id="box2" class="list"></div>
<div id="box3" class="list"></div>
<div id="box4" class="list"></div>
<div id="box5" class="list"></div>
<div id="box6" class="list"></div>
<div id="box5" class="list"></div>
<div id="box3" class="list"></div>
<div id="box1" class="list"></div>
<div id="box4" class="list"></div>
<div id="box6" class="list"></div>
<div id="box2" class="list"></div>
</div>
CSS
#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
fiddle
each <div class="list"> actually would hold a single image but for the purpose of this i set the widths and heights to be that of the divs high if the images were there. and yes i am away of the duplicate ids but in reality these divs wont have ids, just the class.
anyway i am trying to get these divs to vertically align for each line. the vertical align needs to be dynamic to the point that if the tallest box (ie. #box3) is removed from a line (because of the re-sizing window moved it to a different line or it was removed all together from HTML) the line should adjust accordingly (ge. if #box3 and #box5 were on the same line where other lines almost touch #box3 border, when all #box3 is removed the other lines should now almost touch #box5 border)
As you can see i am already using vertical align with no avail. so what other CSS do i need?
Just set vertical-align to the elements themselves instead of the wrapper.
CSS
#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}
See DEMO
You could use flexbox to achieve the desired result if you are okay with current browser support for flexbox.
Using flexbox provides the ability to evently distribute your images horizontally in each row and align them at their vertical centers.
/* Flex container */
.container{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
/* Each div inside container */
.container div{
align-self: center;
margin:20px;
}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
<div class="container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box5"></div>
<div id="box3"></div>
<div id="box1"></div>
<div id="box4"></div>
<div id="box6"></div>
<div id="box2"></div>
</div>
#wrap{
margin: 0 auto;
text-align: center;
border: 1px solid #000000;
}
.list{
display: inline-block;
margin: 0px 10px;
vartical-align: middle;
}
please try to vartical-align middle in .list class....
is this work?
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'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!
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
I've run into a problem.
My code now:
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
And it seems like this now:
When the word in the second div is as short as can be placed after the first div, it's in one row, like this:
My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!
Like this (PhotoShop):
Thanks for the help in advance!
Is this what you looking for
I removed the float:left from the second inner div and increased the margin.
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div></div>
Hope this helps
No width allowed ? OK here is a try:
AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.
A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)
#main {
display: table;
width: 500px;
margin: auto;
border: 1px solid blue;
}
#main > div {
display: table-cell;
border: 1px dashed black;
padding: 1em;
}
#main > div + div {
padding-left: 20px;
}
EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
This is close to what you wanted. I just set the width for the inner div's. Also, you forgot to close the first div tag.
Float the first box left and give it an fix width. Then give the right div a margin-left bigger than the left div's width! ... and do not float the second div
Try:
<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; margin-right: 20px; border: 1px solid black;">
<b><u>TEST</u></b>
</div>
<div style="overflow: hidden;">
<div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</div>
</div>
http://jsfiddle.net/ZmRY2/5/
Is like a table cell, try this
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left;">
<div style="border: 1px solid black;"><b><u>TEST</u></b></div>
</div>
<div style="display:table-cell;">
<div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
</div>
<br style="clear: both;">
</div>