I have a structure like so
<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
My contentWrapper class has this style:
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}
but the background color and border do not appear.
My left_side and right_side class has this as styleing:
.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}
.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}
If I turn off the float on either the left side or right side, but background and border appear..How do I fix this, I really need to background and border around both left and right side.
Thanks,
J
The class names in the css are wrong. In the html they're called left_side and right_side, while in the css you have right_column and left_column.
Fiddle
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
overflow: hidden; /* THIS /*
}
This will clear the float and basically fixing it. When you float an element it jumps out of the normal layer, causing the parent to behave as there was nothing inside it.
Related
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.
I don't know why but when the height of the content_second_box is set higher then the height of the screen resolution then the whole page shifts left by a few pixels. Once the div reaches the bottom of the screen it shifts, when the height does not reach then it is ok.
I have tried many things but nothing has worked. Does anyone please know why?
CSS is as follows:
body {
background-color: white;
}
#container {
position: relative;
width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 10px 50x 30px 50px;
}
#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 40px 0px 0px 0px;
/*text-align: center;*/
}
#content_first_box {
width: 225px;
height: 50px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #ff8b00; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
#content_second_box {
width: 225px;
height: 500px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #79bbff; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
HTML file is as follows:
<body>
<div id="container">
<div id="content">
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
</div>
</div>
</body>
The scroll bar appears once the page is longer than the viewport. This causes all content to shift left to allow for the scrollbar.
You can get rid of the content shift by always showing the scrollbar in browser as -
html{
overflow-y: scroll;
}
What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol.
Here is what I am currently getting:
This is what I am trying to get... you can ignore the differences in fonts, borders, etc.. lol
This is my css:
#profile-banner {
background: #000;
height: 267px;
border-bottom: 1px solid #999;
margin: 0px 0px 25px 0px;
text-align: center;
}
#profile-banner h1 {
font-size: 36px;
font-family: Piximisa;
letter-spacing: 5px;
padding: 15px;
margin: 0px;
}
#profile-banner p {
margin: 0px;
padding: 0px;
}
#profile-banner .logo {
top: 125px;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
position: absolute;
margin: 0 auto;
padding: 0px;
}
This is my HTML:
<div id="profile-banner">
<h1>Some Team Name</h1>
<p>
Some catchy slogan.
</p>
<img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>
Thanks for your time!
You can't mix absolute and static positioning. You can use absolute positioning:
position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;
or static positioning:
margin: 125px auto 0;
The main difference is how the element affects other elements. Using absolute positioning takes the element out of the document flow, so it doesn't affect other elements.
Change your CSS this way
#profile-banner .logo {
margin: 125px auto 0;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
padding: 0px;
}
Changes
Remove position and top.
Add the top as margin-top.
Positioned elements do not respect margins.
I am having a simple div with header,content and footer.Now my issue is that there is a gap at the bottom of my div.And if I resize browser window some more extra white-space is adding at the bottom of my div.
The entire leftContainer should be of browser height.
For example I need something like this(actually this is done n flash I want it to be done in HTML)
This is how it looks now:
Here is my CSS:
html, body
{
margin: 0;
border: 0 none;
padding: 0;
overflow: hidden;
}
html, body, #wrapper, #left, #right
{
height: 100%;
min-height: 400;
}
.leftContainer
{
width:308px;
max-height: 100%;
height:100%;
border-style: solid;
border-width: 2px 0px 0px 0px;
background-color: #ffffff;
box-shadow: 0px 0px 7px #292929;
-moz-box-shadow: 0px 0px 7px #292929;
-webkit-box-shadow: 0px 0px 7px #292929;
}
.mainbody
{
padding-left: 5px;
margin-top: 0;
min-height: 150px;
max-height:736px;
height: 100%;
background-color: #F9F9F9;
}
.header
{
height: 40px;
color: #000;
border-bottom: 1px solid #EEE;
}
.footer
{
padding-left:20px;
height: 40px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
HTML:
<div class="leftContainer ">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
I don't want the footer to be seperate it should be within its parent div(leftContainer)
DEMO
Have you tried adding
position: relative;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
Take a look : http://jsfiddle.net/UqJTX/7/embedded/result/
There is some issue with shadows, they are added to length in some browsers, so try to put only side shadows and apply negative margin.
Have you tried adding
position: absolute;
bottom: 0;
left: 0;
right: 0;
top:0;
overflow:auto;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
You have to mention the width of each div in percentages. Total left container height is 100% then decide the height for the three divs (like header 10%, body 85% and footer 5%) with appropriate percentages. Mentioning the heights or widths in pixel is not suggestible.
Use firebug for easy debugging of HTML and CSS.
check out this DEMO it works properly
Use this like min-height:100%
may it will useful to you