How to centering a div horizontally without width in old version browsers which are not supported display:inline-block property.
How to centering my .container div horizontally without width
<div class="main_section">
<div class="content_wrapper">
<div class="container">My content</div>
</div>
</div>
Make the content you want to center (.container) inline-block. This way you can center it with text-align: center on the parent div.
.container {
display: inline-block;
background-color: red;
}
.content_wrapper {
background-color: blue;
text-align: center;
}
<div class="main_section">
<div class="content_wrapper">
<div class="container">My content</div>
</div>
</div>
body {
padding: 200px 0 0 0;
margin: 0;
}
.main_section {
float: right;
position: relative;
right: 50%;
z-index: 999;
}
.content_wrapper {
float: right;
position: relative;
right: -50%;
}
.container {
color: #333;
background: #f5f5f5;
border: 5px #ccc solid;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: 1px;
max-width: 1000px;
box-shadow: -1px -1px 5px 1px #666666;
}
<div class="main_section">
<div class="content_wrapper">
<div class="container">Div align center without fix width</div>
</div>
</div>
You can try setting the outer div margin: 0 auto
It will work for responsive too.
Related
I am trying to do the following in the image: The top div will contain text of variable length. The bottom div is fixed in place and should respond by resizing its height to avoid the overlap, while overflowing the text if needed. Is there a way to do this in CSS? I have attached the jsfiddle.
https://jsfiddle.net/0nr3g7kq/123/
* {
font-family: Arial, Helvetica, sans-serif;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 20px;
padding: 5px;
width: 300px;
height: 145px;
position: relative;
}
.content1,
.content2 {
border-style: dotted;
border-width: 2px;
border-color: blue;
margin: 1px;
width: 268px;
}
.content2 {
position: absolute;
bottom: 20px;
}
.title {
font-weight: bold;
}
.desc {}
<div class="card">
<div class="content1">
<span class="title">
This top div should compress the bottom div downwards without changing its position.
</span>
</div>
<div class="content2">
<span class="desc">
This bottom div should respond by being compressed and show 1 less visible line with text overflow but not change position
</span>
</div>
</div>
Just add min-width:268px; to .content1, .content2 it will solve current problem
put max-width: instead of width: in .content1, .content2 and remove .content2 { position: absolute; bottom: 20px; }
I am wanting to place a div within another div. The point is to create a border at the top of the div. The border will include a small icon image at the left, and a headline.
I am thinking that there will actually need to be a total of three divs within the main div (lighter grey color). Main border div (100% width...the dark grey color example), then within that div will be two more divs. Div for the small icon (20% width), and a div for the headline content (80% width).
How do you position those three divs (dark grey color), within the main div (lighter grey color) to act like a border at the top? Any short examples would be greatly appreciated.
A link to an example image is provided...
enter image description here
Something like this might get you started:
.panel {
display: block;
position: relative;
width: 30vw;
height: 50vh;
background-color: #CCC;
}
.panel header {
width:100%;
background-color: #999;
border-bottom: 1px solid black;
}
.panel footer {
font-size: 60%;
position: absolute;
bottom: 0;
width:100%;
border-top: 1px solid black;
text-align: center;
}
<section class="panel">
<header>
something something
</header>
<div class='content'>
content content
</div>
<footer>
panel footer
</footer>
</section>
Use this
.cont {
width:400px;
height:500px;
background: lightgray;
position: relative;
}
.header {
position: absolute;
left: 0;
top: 0;
width:100%;
height:80px;
background: gray;
color:#fff;
font-size:40px;
font-family: sans-serif;
line-height:80px;
padding:0 0px 0 70px;
box-sizing:border-box;
}
img {
position: absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="cont">
<div class="header">
<img src="https://picsum.photos/50" alt="">
HEADLİNE
</div>
</div>
<div class="box">
<h2>
<span class="box__icon"></span>
Headline
</h2>
<div class="box__content">
Content
</div>
</div>
https://codepen.io/anon/pen/OdYaeY
Your thinking is fine, just be sure to use a naming convention that is consistent and works for you. Here's an example you can feel free to use:
.container {
width: 300px;
height: 350px;
margin: 0 auto;
font-family: Arial, Helvetica, Verdana;
font-size: .95rem;
}
.header {
background: #999;
color: white;
text-transform: uppercase;
padding:.5em;
font-size: 1.3rem;
}
.header .icon {
display:inline-block;
min-height: 1rem;
min-width: 20px;
border: 1px solid white;
}
.body {
background: #ccc;
height: 100%;
padding: 1rem;
}
<div class="container">
<div class="header">
<span class="icon"></span>
<span class="title">headline</span>
</div>
<div class="body">
This is your body block
</div>
</div>
How with help of css and html i could do this:
i have 3 div's, and i have separator between them, and this separator, and text-area div must be not 65px as in my example, but maximal height div (in example this is first div), for example if there i have 2 lines only, i will have smaller by height div, and separator must be same height (maximal). How could i do this... didn't have any ideas(
http://jsfiddle.net/crjsg/
<div class="introtext-text-area">
<div class="introtext-separator"></div>
<div class="introtext">
here is example text of test example with 3 <br>lines
</div>
<div class="introtext-separator">some text</div>
<div class="introtext"></div>
<div class="introtext-separator"></div>
<div class="introtext"></div>
</div>
css:
.introtext-text-area {
height: 65px;
width: 690px;
margin: 8px 0 0 0;
}
.introtext-separator {
width: 3px;
height: 65px;
float: left;
border: none;
background-color: red;
margin: 0 0 0 -1px;
}
.introtext {
width: 211px;
height: 58px;
float: left;
padding: 0 8px 0 8px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
how could i set automatical height for text-block and separator, and this height must be same for 3 text div's and it's separators.
You can use display:table and borders :
<div class="introtext-text-area">
<div class="introtext">
here is example text of test
example
</div>
<div class="introtext">
some text
</div>
<div class="introtext">
some text
</div>
</div>
.introtext-text-area {
display:table;
border-right:solid red;
}
.introtext {
width: 211px;
padding:5px;
display:table-cell;
border-left:solid red;
}
Use these css defintions:
.introtext-text-area {
overflow: hidden;
width: 100%;
margin: 8px 0 0 0;
}
.introtext-separator {
float: left;
border: none;
margin: 0 0 0 -1px;
height: 100%;
}
.introtext {
width: 211px;
float: left;
padding: 0 8px 0 8px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
.bordered {
border-left: 3px;
border-left-color: red;
border-left-style: solid;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Add the handy .bordered class to each of your divs:
<div class="introtext-separator bordered"></div>
<div class="introtext bordered">
The trick is that the parent div has overflow:hidden and the bordered class has really large paddings.
Forked fiddle
Basically I want to put the div tags below in the center of the page. How is this done in CSS? I am having such a hard time doing it what is the best option!?
HTML
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
CSS:
.tab-selected {
background: #FF00FF;
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #FFFFFF;
height: 15px;
display: inline;
}
.tab-unselected {
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #585858;
height: 15px;
display: inline;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 60px;
display: inline-block;
horizontal-align: center;
}
Wrap the class .tab-unselected in a seperate div whose properties would be -
.center { margin: 0 auto; float: none; }
Now -
<div class="center">
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
</div>
horizontal-align does not exist. Use text-align: center instead. To horizontally center the element itself, use margin: 0 auto;, which equals:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin:left: auto;
The automatic right and left margin results in a centered element.
If you want to vertically align an element, use vertical-align: center (this does only work on inline elements).
Wrap them in a <div style="text-align: center;"> (or use some other way to apply that style to a containing element).
Wrap them in a div
#center {
margin: 0 auto 0 auto; }
Then apply
<div id="center"> <YOURSTUFF HERE> </div>
How can the parent div auto resize it's height based on the child's height?
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}
<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some contents here (height is set to auto)
</div>
</div>
I made a very simple example for you to see how variable parent height works.
.parent
{
height: auto;
border: 1px dashed #f00;
padding: 5px;
}
.child
{
height: 100px;
border: 1px dashed #0f0;
}
<div class="parent">
<div class="child">
</div>
</div>
Follow what is there and you'll do fine.
After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both; to clear the floats and make the #main div appear filled in.
Look at example here.
div#main{
width: 970px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
Remove height attribute
CSS3
.container {
display: inline;
position: relative;
}
Should fix it. Use inline-block if you want it to be a block with inline.