I am new to css and try to understand the box model.
So far my understanding is block level elements have a break at start and end.
If i create following html structure
<div class = "outerDiv">
<div class = "innerDiv">
</div>
If i set the background image for both of them then both image appears in one line.
.outerDiv {
background: url(/img/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1em;
}
.innerDiv {
background: url(/img/top-left.gif) no-repeat left top;
}
div {width : 20px;}
They both appears in one line.
If I add text to both the divs, then they appears in different lines
Sorry my question is -
Does empty div with width settings (they are block level elements) do not behave as block level elements, as do not include break as the start and end of the element.
Thanks,
Daljit Singh
<div class = "outerDiv">
<div class = "innerDiv"></div>
</div>
.outerDiv {
background: black;
padding-bottom: 1em;
width: 100px;
height: 100px;
}
.innerDiv {
background: white;
left: 20px;
top: 20px;
width: 20px;
height: 20px;
position: absolute;
}
The key is the position: absolute :) it will put the innerdiv inside the outerdiv :)
top and left adjusts where the location of the innerdiv is in the outerdiv
width and height you probably already know :)
You can see a fiddle example here: http://jsfiddle.net/42Duf/
Related
I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why.
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
What I want is to have the green block at the top (see fiddle).
Here is the fiddle
Please can anyone explain the behaviour and answer why the block is shifted from the top?
It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.
Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:
/* header block */
header {
height: 536px;
background-color: #ddd;
background-position: center;
background-size: 100% 536px;
background-repeat: no-repeat;
overflow: hidden;
}
header .header-wrapper {
position: relative;
overflow: auto;
z-index: 2;
}
.header-slogan-1 {
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-top: 88px;
}
.header-wrapper .header-info {
position: absolute;
top: 0;
z-index: 3;
background-color: #4caf50;
max-width: 600px;
padding: 25px 25px 25px 75px;
color: #fff;
}
.text-center {
text-align: center;
}
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
If I'm understanding this correctly, you want the header to have no space around it. If this is the case, then just add
body {
margin: 0;
padding: 0;
}
to the top of your css and you should be all set.
I changed margin-top: 88px; into padding-top: 88px; of header-slogan-1 as it does not change my layout. I have an image in wrapper class and it is centered and may exceed the container size, so I need position:relative and overflow:hidden.
Finally I decided to pick my solution. Sorry Adam for not choosing your answer.
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
I am working on a navigation bar that has a right section with contents that will vary in width and then I want the left section to take the remainder of the space. I found display: inline-block; sets the element width based on it's content, but I cannot get the left section to take the remainder of the space.
I found another question that shows how to do what I want if the right section was the remainder (Set width to remainder of parent - dynamic width) and tried to figure out how to use that concept the other way round, but the right section ends up going onto a second line.
Ultimately I am trying to do this with polymer core-toolbars, but I cannot even get this to work with a very simple example.
html:
<div id="container">
<div id="left">main</div>
<div id="right">variable width content</div>
</div>
css (using linked example):
#container {
width: 100%;
height: 32px;
}
#left {
overflow: hidden;
height: 100%;
background-color: blue;
}
#right {
float: right;
max-width: 25%;
height: 100%;
background-color: grey;
}
css (using inline-block):
#container div{
position: absolute;
top: 0px;
height: 32px;
}
#left {
left: 0px;
background-color: blue;
}
#right {
right: 0px;
display: inline-block;
background-color: grey;
}
Linked example fiddle
Inline-block fiddle
I am not tied to using either of these methods, this is just what I have been trying after reading several posts.
I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div.
I searched a few things online, but nothing seemed to work. Here is my css for a simple test...
#picture_wrapper {
width:550px;
background-color:#00F;
float:left;
}
#picture_container {
width: 500px;
float: left;
padding-left:5px;
padding-right:5px;
}
#left_arrow_container {
float: left;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
#right_arrow_container {
float: right;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.
<div id="picture_wrapper">
<div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
<div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
<div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>
Here is how it is being displayed on my Dreamweaver now...
pic1 http://www.startingtofeelit.com/images/pic1.png
Here is how I more or less want it to be displayed...
pic2 http://www.startingtofeelit.com/images/pic2.png
Thanks for the help.
Sounds like a job for vertical-align: middle;.
http://jsfiddle.net/Wexcode/Lp5M9/2/
#picture_wrapper {
background: #F00;
float: left;
font-size: 0;
white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
height: 100%;
vertical-align: middle;
display: inline-block; }
#picture_container {
background: #00F;
padding: 0 5px;
vertical-align: middle;
display: inline-block; }
Let me know if you have any questions.
I prefer using absolute and relative position :), pretty much what I saw you were trying to achieve in your css, in order to top, left, right and bottom to work you must set a position (absolute, relative or fixed) and use your arrows as backgrounds
http://jsfiddle.net/wQqfp/2/
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/