<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div style="
border: 2px solid black;
margin: 0 auto;
text-align: center;
padding: 3px;">
Hello<br />Hola
</div>
<div style="
border: 2px solid black;
margin: 0 auto;
text-align: center;
padding: 3px;">
Another Sentence
</div>
</div>
I have a problem: the borders of the inner div's reach over the whole width of the page, but i want them to only frame the content inside them. If i use: display: inline the borders frame each line separately and overlap, so that doesn't work - can somebody help?
P.S the style's aren't declared like this in the original document but in a stylesheet
Assign a width to the absolutely positioned element? If you're looking for shrink-wrapping, float:left or display:inline-block are perfect for that.
Try display:inline-block, it always helps me in situations like this.
http://jsfiddle.net/FaYLk/
Its not as simple to just do:
display: inline-block;
You must do more than that to cross browser this.
display: inline-block;
display: -moz-inline-stack; /* for firefox 2 */
*display: inline; /* for ie 6 and 7 */
Put a container around all the content. E.g
<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div>
.container{ display: inline-block; }
Related
Here is an example I'm working with:
http://jsfiddle.net/adyjzbuh/18/
Here is the code:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
Here is the CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
As you can see, the first block does exactly what I want. The margins automatically adjust, the block is centered as intended. The issues come when there is multiple lines of text. When I use the same style for the next block with multiple lines of text, the block adjusts the width to 100% of the available space, leaving a big gap on the first line and block not appearing centered.
I tried changing the display to inline-block and table-cell but it does not work (as evidenced by the third and fourth block). I've searched everywhere for solutions and none have worked.
The outer container will always be 300px and the inner block will always have to be flexible and adjust to multi-line text. Any solutions/examples would be greatly appreciated, thank you.
EDIT I forgot to mention the client specifically wants the text to align to the left.
I would add:
text-align: center
or
text-align:justify
instead of:
text-align:left
Is that what you expected to look like?
You might want to put a max-width: 50%; on your innerboxes. The reason is your solution doesn't really work the way you want is your margins are set to auto, so the margin is calculated of the width. So if say your width would be 50% of the parent container (in this case .box1), the margins are automatically calculated to fill up the other 50%, 25% for each side.
Max-width could fix your problem, the innerboxes are still flexible, but only will take up 50% of the width.
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
max-width: 50%;
}
Not sure what you are looking for ultimately, but here is a working example, with using table method, like you have, but using
display:table;
display:table-cell;
accordingly with text aligned in the middle, and centered or left aligned.
I have a div and an image in one div. Parent div has the background color. display: inline-block is given to both child div and the image.
<div style="background-color: black;">
<div style="display: inline-block; width: 20px; height: 105px; background-color: #27ae60; margin: 0;"></div>
<img style="display: inline-block; padding: 0px 10px;" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" />
</div>
jsfiddle link
http://jsfiddle.net/hv9szL92/2/
Gap below ebay image and green block must be removed. Thanks
The gap is because you set child elements as display: inline-block, and inline/inline-block elements respect white spaces, including new-line characters.
The simplest fix is to set zero font-size on the parent container in order to make those white spaces zero sized.
<div style="background-color: black; font-size: 0;">
/* content unchanged */
</div>
Remember to reset font-size back to some reasonable value for any nested element if you need to display text in them.
And it's better not to use inline styles, but I assume this is just an example in your case.
Demo: http://jsfiddle.net/hv9szL92/4/
As asked by OP, "Gap below ebay image and green block must be removed. Thanks"
http://jsfiddle.net/hv9szL92/5/
set the vertical-align property on the image and you're done (see Get rid of space underneath inline-block image) :
<img style="display: inline-block; padding: 0px 0px; vertical-align: top;" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" />
As for the green block, just remove the nested div element
You can just edit the margin of your img
<div style="background-color: black;" >
<div style="display: inline-block; width: 20px; height: 105px; background-color: #27ae60; margin: 0;" ></div>
<img style="display: inline-block; padding: 0px 10px; margin-bottom: -3.1px;margin-left: -13.5px;" src="http://cdn01.coupondunia.in/sitespecific/MEDIA/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" />
</div>
Giving the image a negative margin should prove to be helpful
Any problems , let me know
Properly aligned and formatted using CSS-tables and Unordered List.http://codepen.io/anon/pen/WvGJqq
<div id="container">
<ul>
<li id="green-block"></li>
<li id="logo-wrap"><img id="logo" src="http://cdn01.coupondunia.in/sitespecific/media/generated/merchantlogos/logo_5e29580_97.jpg?v=1413531812" /></li>
</ul>
</div>
By using CSS tables you are able to use 'vertical-align: bottom;' to align the image with the bottom of the css cell.
Structure as follows:
- div#container [display: inline-table]
- ul [display: table-row]
- li [display: table-cell, vertical-align:bottom]
- img#logo [display: block, vertical-align:bottom]
Its pure css, but the same concept besides table layout creating from the mid 90's.
/* css reset */
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding: 0;
margin: 0;
width: 0;
}
/* css */
#container {
width: 100%;
height: 105px;
background: #000;
margin: 0;
padding: 0;
display: inline-table;
}
ul {
display: table-row;
}
#green-block {
width: 20px;
height: 105px;
background-color: #27ae60;
margin: 0;
display: table-cell;
}
#logo-wrap {
display: table-cell;
vertical-align: bottom;
}
#logo {
display: block;
vertical-align: bottom;
margin: 0 10px;
}
A really nice article out lying many of the concepts used for CSS tables.
http://colintoh.com/blog/display-table-anti-hero
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
My pen
http://codepen.io/helloworld/pen/dqGDk
I want to vertically align 3 divs inside a wrapper div. Each of the 3 divs should have a height of 33%. I can make the layout work when the divs has a height of 33px but I need it as percentage because the wrapper div`s height changes dynamically. Sometimes its 100px height, sometimes 70px etc...
I just want that all 3 are always correct align by using percentage height.
What is the approach aligning divs with percentage?
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<div id="navigationWheeler" >
<div id="previewTemplate" >1</div>
<div id="previewTemplate" style="background-color: #0094ff;">2</div>
<div id="previewTemplate" >3</div>
</div>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
#previewTemplate {
vertical-align: middle;
line-height: 33%; /* 33px; works but is not dynamic to the wrapper div */
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
I use flex-box, works way better the list items plus you can place ul,ol,il in flex-box.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It's much easier if you change to use an unordered list. Also the ID previewTemplate should be a class as the ID has to be unique.
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<ul id="navigationWheeler" >
<li class="previewTemplate" >Testing</li>
<li class="previewTemplate" style="background-color: #0094ff;">2</li>
<li class="previewTemplate" >3</li>
</ul>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
Then in your CSS you can set .previewTemplate in the CSS to have a height of 33%. Also add list-style: none; to get rid of the bullets. Then in #navigationWheeler set padding-left: 0; to get rid of the spacing.
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
padding-left: 0;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
.previewTemplate {
height: 33%;
list-style: none;
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
Now when the height of your #wrapperDiv changes the li with class .previewTemplate will change it's height.
Here's a working JSFiddle. Also you should avoid using inline CSS. Have all your styles inside your CSS file. Makes it easier to manage in the long run.
EDIT Adding padding-left: 0 to the CSS for the #navigationWheeler
EDIT Updating the JSFiddle to take in account the padding-left for the <ul>
Try using list items instead of div's. You can easily style and their syntax is more focused on alignment then a div. Also, Your wrapper div's need to be a percentage as well, you can't do a 10% height in a 100px wrapper div..
I'm trying to make the menu appear at the middle of 30px line but the problem is that I cannot move it from the top unless I use display: table-cell.
What is wrong here?
Style sheet file:
div.menu
{
width: 600;
height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
vertical-align: bottom
}
The menu code in my html file:
<div class="space"></div>
<div class="menu">
Home
Home
Home
Home
Home
</div>
<div class="space"></div>
line-height: 100px; set the height of your menu line. But keep enough space in horizontal dimension, otherwize you will get crazy view. Look forward to min-width, width or overflow-x rules.
div.menu
{
width: 600px;
/* Use line-height instead of height */
line-height: 30px;
border: 1px solid black;
margin: 0px auto;
text-align: center;
}
div.menu a {
vertical-align: middle;
}
setting the line-height to the desired value fixes the issue but it is not a correct way to do it. It is just a hack. The correct way is to use vertical-align property (for all the anchors inside the menu div)
.menu a {
vertical-align: middle;
}
Check this fiddle. http://jsfiddle.net/sfz7d/
Tell me if it works for you.