.div-1 {
background-color: #deb887;
margin: 0 auto;
width: 100%;
height: auto;
display: inline-block;
}
.div-2 {
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
<div class="div-1">..... some code here </div>
<div class="div-2">..... some code here</div>
a white space is coming between 2 div, under one another
I found some solution of this problem, but they are not working.
vertical-align: top; ----- not working
line-height: 0px; ------ it effects on the text of div
font-size: 0px; ------- it also effects on text
*{
margin:0;
padding:0;
------------------ not working
Please help, thanks in advance.
.div-1{
display: block;
width: 100%;
background-color: #deb887;
margin: 0 auto;
height: auto;
}
.div-2 {
height: 10px;
vertical-align: top;
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
Try this way:
<div class="div-1">..... some code here </div><!--
--><div class="div-2">..... some code here</div>
Please note the comment syntax
Related
HTML:
<div id='inner'>I am sam <em>I am em</em> I am sam</div>
CSS:
#inner {
width: 400px;
height: 400px;
background-color: cyan;
}
em {
margin: 1em;
padding: 1em;
display: inline-block;
vertical-align: top;
}
Result: https://jsfiddle.net/cbukkt3m/1/
Why does it throw the surrounding text to the top and not the em itself?
It is aligned to the top, it's being pushed down by:
margin: 1em;
padding: 1em;
try removing these or changing them to
margin: 0 1em;
padding: 0 1em;
I am trying to put a margin in left and right of the rhombus but couldn't.
Basically I am styling < hr > in to a custom styled hr
Code:
<div class="container">
<hr class="square gold">
<p>some text</p>
</div>
Demo :http://jsfiddle.net/squidraj/03xw85w0/
Any help is highly appreciated. Thanks in advance.
Basically, you can't do this with an hr...you would have to use a span or some such other element.
Then you can follow the techniques as detailed in the linked question HERE.
body {
text-align: center;
}
.divider {
width: 70%;
margin: 20px auto;
overflow: hidden;
text-align: center;
line-height: 1.2em;
display: inline-block;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 1px solid black;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
<span class="divider">◊◊</span>
<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example
Both the left and right panels have a height of 100%, but since the Header div takes up X amount of space, there is some vertical scrolling in the window that I want to get rid of.
How can I remove that vertical scrolling?
JSFiddle: http://jsfiddle.net/G7unG/1/
CSS and HTML
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
}
.leftpanel, .rightpanel{
height: 100%;
}
.leftpanel{
float: left;
width: 70%;
background: #CCC;
}
.rightpanel{
float: left;
width: 30%;
background: #666;
}
<div class="header">Header</div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
<div class="clearfix"></div>
Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.
HTML:
<div id = "wrapper">
<div class="header">Header</div>
<div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #fff;
}
.leftpanel{
background: #CCC;
}
.rightpanel{
background: #666;
}
#wrapper {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
outline: 1px solid red;
}
#wrapper > .header {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#wrapper > .header + div {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#wrapper > .header + div > div:first-of-type {
-webkit-flex: 7 0 0;
flex: 7 0 0;
}
#wrapper > .header + div > div:last-of-type {
-webkit-flex: 3 0 0;
flex: 3 0 0;
}
You can use absolute positioning if you want to have it 100% height always. And then use scroll bars if required inside the leftpanel or the rightpanel.
Example: http://jsfiddle.net/G7unG/2/
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
height: 22px;
}
.leftpanel, .rightpanel{
top: 52px;
bottom: 0;
position: absolute;
}
.leftpanel{
width: 70%;
left: 0;
background: #CCC;
}
.rightpanel{
width: 30%;
right: 0;
background: #666;
}
Solution 2 - use fixed percentages for height: http://jsfiddle.net/G7unG/4/
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
height: 30%;
box-sizing: border-box;
}
.leftpanel, .rightpanel{
height: 70%;
float: left;
}
.leftpanel{
width: 70%;
left: 0;
background: #CCC;
}
.rightpanel{
width: 30%;
float: right;
background: #666;
}
You could use overflow: hidden; to protect the body to be scrollable.
according to your comment: http://jsfiddle.net/G7unG/9/
Like this: http://jsfiddle.net/G7unG/3/
html, body{
height: 100%;
margin: 0;
overflow:hidden;
}
You could use a "faux columns" type of structure -- adding the background color of your columns as "fixed" elements (they wont scroll with the page) behind your real columns.
<div id="left_faux"></div>
<div id="right_faux"></div>
div#left_faux {
position: fixed;
top:0;
left:0;
right:30%;
bottom:0;
background-color:#CCC;
}
div#right_faux {
position: fixed;
top:0;
left:70%;
right:0;
bottom:0;
background-color:#666;
}
.leftpanel{
float: left;
width: 70%;
}
.rightpanel{
float: left;
width: 30%;
}
This quick example is perhaps overly verbose, for demonstration purposes. I'm sure you can streamline the CSS so there aren't so many redundant definitions.
WORKING EXAMPLE
Use viewports. Browsers now support giving height a percentage of page height. Drop the 100 down to 80 if you've got a header taking up space.
div {
height:100vh;
}
I'm probably turning mad but I really cannot seem to find out what I'm doing wrong. I'm simply trying to center my image.
<div class="container ">
<img src="design/images/logo.png" alt="logo" class="logo" />
<div class="contactData">
data
</div>
</div>
This is my CSS:
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
}
.contactData {
max-width: 206px;
margin: 30px auto 0 auto;
text-align: center;
float: none;
}
The contactData div just centers fine but the image doesn't.
add display:block; in your .logo
That should probably fix it
Use either display: block; or display: inline-block; while you are using margin: auto; for the images.
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
display: block;
}
Images are inline by default and you need to trigger hasLayout or something similar.
add this code
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
text-align: center;
vertical-align: middle;
You are not specifying any aligning for image.
In the container class, Just give
text-align:center;
In .logo just add display:block; in your CSS.