I have design like this :
<div id='container'>
<div class='box'>
<div class='boxleft'>something left</div>
<div class='boxright'>something right</div>
<div class='clear'/>
</div>
</div>
And I set CSS as :
*{margin:0; padding:0}
.clear{clear:both}
#container{width:100%; height:auto; background:#f1f2f3}
.box{width:95%; margin:0 auto; height:auto; background:white}
.boxleft{float:left;width:49%;margin-right:1%;}
.boxright{float:right;width:50%;}
Problem: Background is white of class .box be load later after class .boxleft finished the loading. I now want it load background follow the height of class .boxleft. So, How can I do this?
Thank for your suggestion.
Your problem is a result of the float left and float right without having an height on both boxes inside the main box. Add this to your .boxleft and .boxright:
display:block
That should work.
Related
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
I have a problem in my website
I have a big <div> with brown background and it has no height and have 3 <div> elements inside it, and that big <div> should not have absolute position.
I tried to fix that using float, but when I use float left/right that brown background is no longer visible!
Below is a simple code for understanding my problem :
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You do not need to float the elements, all you need to do is use display:inline-block;
As the float object basically means your box model loses it's height value as it no longer is relative to its parent. If you want to go the float method make sure you put a <br class="clr-b"> where .clr-b { clear:both; }
This might be causes of floating. You could resolve your problem by just applying overflow:hidden; styles to your big div.
Else, you could use clearfix method (clear: both;).
<div id="bigDiv" style="background-color:brown; overflow:hidden;">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You can use floats:
http://jsfiddle.net/bKVuc/
#bigDiv {
width: 100%;
overflow: hidden;
}
#right, #midle, #left {
float: left;
width: 33.333%;
height: 100px;
}
Try this:
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
<div style="clear:both;"></div>
</div>
You can top float by using style:
<div style="clear:both;"></div>
In case the big div is floated with height:auto, the element should be floated in order to stuff the big div. Or the big div acts as if there is nothing in it(height=0), so the background disappears.
jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
Here is an example how it looks