How to center squares in the wrapper without using text-align:center?
I need this because it also centers all text in squares, but I don't need this.
HTML :
<div id="wrapper">
<div id="squares">
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
<div class="square">lol</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
body {
line-height: 18px;
}
#wrapper{
width: 960px;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
.square {
width:251px;
height:207px;
border: 1px solid #d6d6d6;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
margin: 10px;
overflow:hidden;
position:relative;
background-color:#fff;
display: inline-block;
cursor: pointer;
}
#wrapper{
...
text-align: center;
}
.square {
...
text-align: left;
}
---- Another way (I don't recommed!)
How to find 52px: (width of div - (#of squares * width of one square))/ #of squares+1 ->
(960-(250*3))/4
#wrapper{
...
padding-left:52px;
}
.square {
...
margin: 10px 52px 10px 0;
}
You can try:
.squares {
margin-left:auto;
margin-right:auto;
}
Since it is text inside the squares you are styling you could put an H or P tag around the text and then text-align: left; them.
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
body {
margin: 0;
width: 100%;
background-color: #292929;
}
.holder {
width: 66%;
height: 330px;
background-color: #412A22;
position: relative;
-webkit-box-shadow: 2px 2px 2px 0px #000000;
-moz-box-shadow: 2px 2px 2px 0px #000000;
box-shadow: 2px 2px 2px 0px #000000;
display: inline-block;
}
.holder:before {
content: '';
position: absolute;
top: 0; left: 0;
border-top: 50px solid #292929;
border-right: 50px solid #412A22;
width: 0;
}
.sidething {
float: left;
width: 100px;
display: block;
}
<div class="main">
<div class="holder">
<div class="holder-imgs">
</div>
<div class="contact">
</div>
</div>
<img class="sidething" src="Layer%203.png">
</div>
This is my css and html and what i basicly need is to center both image and div in the middle of the page. Here is what it looks like with image: http://imgur.com/IROUUk2
Thanks in advance
Why not do something simple like this:
<center>
<div class="main">
<div class="holder">
<div class="holder-imgs">
</div>
<div class="contact">
</div>
</div>
<img class="sidething" src="Layer%203.png">
</div>
</center>
Simple HTML - should do the trick!
Or, if you're main 'holder' div will only contain text, you could add the following property to the 'holder' div css:
text-align: center;
You might find this site useful!
Hope this helps and best of luck!
I have this short example:
link
CODE HTML:
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
CODE CSS:
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 5px 0 5px 0;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 0px 10px 0 10px;
height: 100%;
}
My problem is that border (red border) is not until the end header.
There is a space both top and bottom in.
CSS code in the header must remain exactly the same
Can you help me to solve this problem?
Thanks in advance!
set padding 0px for header and add line-height
.header{
width:300px;
height:auto;
border:1px solid grey;
padding: 0;
line-height:25px;
}
remove padding from the .header class. This space is header's padding. And add the padding to the .menu-collapse class.
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px 10px;
height: 100%;
}
Here is the fiddle.
Remove Padding from header and provide top & bottom padding too to menu-collapse.
Try this:
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 5px;
height: 100%;
}
<div class="header">
<div class="menu-collapse">MENU</div>
</div>
Check this:
https://jsfiddle.net/6ae7vumn/3/
.header{
width:300px;
height:auto;
border:1px solid grey;
}
.menu-collapse {
display: table-cell;
vertical-align: middle;
border-right: 2px solid red;
padding: 15px 5px;
height: 100%;}
You dont need to use padding in header
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
I have this data:
<div id="results">
<span id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</span>
</div>
I'm trying to emulate this:
Here is my CSS Code:
#results {
width: 700px;
margin: 0px auto;
border: 1px solid black;
}
#row {
width: 85%;
margin: 0px auto;
border: 2px solid green;
}
#left {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
#middle {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
#right {
float: left;
width: 200px;
margin: 5px 5px 5px 5px;
border: 1px solid blue;
}
<div id="results">
<span id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</span>
</div>
The problem is, that it turns out like this!
It looks fine except to the right of the right span block, that green chunk there is supposed to be the #row wrapper. Why isn't it wrapping like it should?
Define display:block or display:inline-block to your #row span Because span is an inline element which didn't take width & height by default.
Check this http://jsfiddle.net/2xufx/
Because the inner elements are using float you have to 'reset'. E.g. by using overflow: hidden; on the parent.
Also you are trying to set a width on an inline element (the span), which cannot be done. Change it to either block or inline-block.
Perhaps this may help you
<html>
<head>
<style type='text/css'>
#results {width: 700px; margin: 0px auto; border: 1px solid black; min-height: 50px;}
#row {width: 92%; margin: 0px auto; border: 2px solid green; min-height: 30px;}
#left {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
#middle {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
#right {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
</style>
</head>
<body>
<div id="results">
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
</div>
</body>
</html>
The Out put which i get it
You need to add overflow: auto to the #results and to the #row definition, and you also need to add display: block to #row (or just make it a block element for e.g. a <div/>) to make it work.
CSS:
#results { width: 700px; margin: 0 auto; border: 1px solid black; overflow: auto; }
#row { display: block; width: 85%; margin: 0 auto; border: 2px solid green; overflow: auto; }
#left { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#middle { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#right { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
See the working jsfiddle here.
But keep in mind that width (200px) + the border (2px) + margin (10px) = 212px, multiplying it by 3 = 636px, and 85% of 700px is 595px that's why it does not fit.