I work on a clean CSS layout and i want a sidebar and a content. And if the content in the content box has more text as the sidebar, the sidebar should be growing up to 100%.
But i can't find the solution for this problem.
<body>
<div id="page">
<div class="left">
<div class="logo"></div>
<div class="sidebar">sidebar</div>
</div>
<div class="right">
<div class="header">
<h1>
title
</h1>
</div>
<div class="content">
content text
</div>
</div>
</div>
</body>
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #fff;
font-size: 1.0em;
font-style: normal;
font-family:"Century Gothic", "Avantgarde", arial, sans-serif;
line-height: 20px;
color: #666;
}
div.rightBox {
display: block;
position: absolute;
z-index: 1;
width: 40px;
height: 40px;
top: 181px;
left: 981px;
background-color: #95C97A;
border-bottom: #CAE3BB solid 25px;
border-right: #CAE3BB solid 25px;
}
div#page {
background-color: #fff;
min-height: 100%;
/* Mindesthöhe für moderne Browser */
height: auto !important;
/* Important Regel für moderne Browser */
height: 100%;
/* Mindesthöhe für den IE */
overflow: hidden !important;
/* FF Scroll-leiste */
border: 1px solid #000;
}
div#page .left {
margin: 0 0 0 0;
background-color: #CAE3BB;
min-height: 100%;
height: auto !important;
height: 100%;
width: 200px;
border: 1px solid #000;
border-left: #fff 21px solid;
display: block;
position: absolute;
float: left;
}
div#page .left .logo {
margin: 21px 0 0 -21px;
width: 200px;
height: 200px;
border-left: #B0D69A 21px solid;
background-color: #93C677;
}
div#page .left .logo img {
margin: 5px 0 0 10px;
}
div#page .left .sidebar {
padding: 10px 10px 10px 10px;
}
div#page .right {
background-color: #fff;
min-height: 100%;
height: 100%;
margin: 0 0 0 221px;
display: block;
position: absolute;
}
div#page .right .header {
margin: 21px 0 0 0;
background-color: #B0D69A;
width: 800px;
height: 200px;
}
div#page .right .content {
padding: 20px 0 20px 15px;
width: 770px;
border: 1px solid #000;
}
Here is a fiddler: http://jsfiddle.net/c6TGQ/
Can anyone help me?
If you need two columns you should use display: inline-block or display: table-cell. examples:
http://jsfiddle.net/c6TGQ/1/
http://jsfiddle.net/c6TGQ/2/
Related
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
We are trying to create Email application. We are facing issue in message body div which is over lapping with header div (contains To/CC/Subject). On page load everything looks good but when start adding email id's in To field then body section is getting overlapped with header.
.MainDiv{
position: fixed;
width: 65%;
max-width: 890px;
height: 80%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
}
.Header{
clear: both;
margin: 0 5px 25px;
min-height: 100px;
display: block;
position: absolute;
width: 99%;
border: solid 1px green;
padding: 10px 20px 0px;
overflow: initial !important;{
}
.Body{
position: absolute;
border: solid 1px red;
top: 175px;
bottom: 72px;
width: 100%;
overflow-y: auto;
}
ReplyMessage_Screenshot
remove position: absolute; it's causing problem
.MainDiv{
position: relative;
width: 65%;
max-width: 890px;
height: 100%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
border: solid 1px black;
overflow-y : auto;
}
.Header{
clear: both;
min-height: 100px;
display: block;
width: 100%;
border: solid 1px green;
overflow: initial !important;
}
.Body{
border: solid 1px red;
width: 100%;
overflow-y: auto;
}
h2{
background-color:yellow;
}
h3{
background-color:teal;
}
<div class = "MainDiv" >
<div class ="Header" contenteditable="true">
<h2>
Header ygygyggyggygyyygyggygyyg yyfyffyyffyfyfy yfyfyfyfy gygygygygyyg yggygygyyggy gygyygygyyggygygygygy yggyygygyggyy uhuuuguug guuggugu
</h2>
</div>
<div class= "Body" contenteditable="true">
<h3>
Message Body
</h3>
</div>
</div>
You seem to be overdoing it. Here is what you need perhaps.
.MainDiv{
}
.Header{
margin: 0 5px 10px;
min-height: 100px;
display: block;
border: solid 1px green;
padding: 10px 20px 0px;
}
.Body{
border: solid 1px red;
margin: 0 5px 0;
overflow-y: auto;
padding: 10px 20px 0px;
height:300px;
max-height:600px;
}
<div class="MainDiv">
<div class="Header">
</div>
<div class="Body">
</div>
</div>
I have been browsing about it but i cannot relate any answer, basically there is a white gap between Header and Body, see below:
I read somewhere that some elements have default margins or padding like the <ul> but i cannot really identified as i am just getting into web.
Here is how my items are positioned:
header{
background-color: white;
position:relative;
}
p.secondaryText {
color: darkgray;
}
.menu{
background-color: dodgerblue;
}
.logo{
position: relative;
width: 100%;
}
.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division{
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body{
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body{
position: relative;
text-align: center;
}
.options-section{
text-align: center;
}
.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer{
background-color: black;
height: 200px;
}
and the menu:
ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover{
text-decoration: none;
}
I have tried the margins but doesn't have any impact.
EDIT :
you can download the project on github if you wish to, is running on node js, just node server and listen in port 9000
http://localhost:9000/index.html
.
As you have said, there is default styles for many elements, one of them is the UL.
All you need to do, is to override it with margin: 0.
header {
background-color: white;
position: relative;
}
p.secondaryText {
color: darkgray;
}
.menu {
background-color: dodgerblue;
}
.menu ul {
margin: 0;
}
.logo {
position: relative;
width: 100%;
}
.logo-img {
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social {
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division {
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container {
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%;
/* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body {
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body {
position: relative;
text-align: center;
}
.options-section {
text-align: center;
}
.services-box,
.company-box,
.contact-box {
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer {
background-color: black;
height: 200px;
}
and the menu: ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a {
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover {
text-decoration: none;
}
<header>
<div class="social">
<p class="secondaryText">It is a long established fact that</p>
</div>
<div class="division"></div>
<div class="logo">
<img class="logo-img" src="R/Metalplatelogo.jpg">
</div>
<div class="menu" id="myMenu">
<nav>
<ul>
<li>トップページ</li>
<li>事業内容</li>
<li>会社概要</li>
<li>お問い合わせ</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<div class="body-container">
<img class="img-container" src="http://via.placeholder.com/2000x2000">
<div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>
<div class="main-body">
<p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
<h2>屋根・外壁のことならおまかせください。</h2><br>
<p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>
</div>
<div class="options-section">
<div class="services-box">
</div>
<div class="company-box">
</div>
<div class="contact-box">
</div>
</div>
<div class="about-section">
</div>
<div class="news-section">
</div>
<div class="map">
<iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4
&q=Space+Needle,Seattle+WA" allowfullscreen="">
</iframe>
</div>
<footer>
This is the footer
</footer>
Could you not just make the body margin: 0; & padding: 0;? & then set the margin and padding to each element if you want margin/padding?
body {
margin: 0;
padding: 0; }
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}
I read this post but still ain't able to center the inner <div> :
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
It must be related to the position: absolute; property but it is required in order to insert absolute-position <img> elements in the inner <div>.
Simple, add this:
.game {
right: 0;
left: 0;
margin: 0 auto;
}
Since the width is given left and right will not affect your elements width. margin: 0 auto; will do the positioning
Example:
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right:0;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
Just add
left: 0;
right:0;
To the game class, and it will be horziontally centered. The trick here is to set the position to left 50%, and margin left to minus 1 half of the container width. Let me know if this solves it for you.
EDIT: helpful comments have shown me that we do not need the margin left negative, we can just set the left and right attribute for horizontal alignment. This is better because it will work regardless of the width of the element
Here's another approach..
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
http://www.codeply.com/go/E0xL0KyOkU
you can use the image as the background of the class game
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
height:300px;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position:relative;
left: 0;
top:28%;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
try this
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
}
.game {
border: 5px solid black;
width:30%; margin:0 auto;
position: absolute;
left: 0;
right: 0;
padding: 0 20px;
}
<div>
<div class="game">
test
</div>
</div>