I'm using bootstrap framework for a project, but I'm having trouble with a central div for my site.
I need to put a div vertically centered but with a background color for 100% full width, and inside the container div of bootstrap.
I need to build the blue part (Central DIV) of the image http://www.hmsg.net/layout.png
use this
<div class="col-lg-12" style="background: url("../img/Bg.png"); background-size: 100% auto; height:100%;">
<div class="col-lg-12" style="hieght:500px; padding:0px; margin:0px;">
</div>
<div class="col-lg-12" style="background-color:#ffffff; hieght:500px; padding:0px; margin:0px;">
</div>
</div>
Try this
<div class="col-lg-12"
style="padding:0px; background-image: url('http://www.kiteworldmag.com/media/wallpapers/2/187/3.jpg'); background-size: 100% auto; height:500px;;">
<div class="col-lg-12" style="height:300px; padding:0px; margin:0px; display: block">
</div>
<div class="col-lg-12" style="background-color:#ffffff; height:100px; padding:0px; margin:0px;">
sdfsdf
</div>
</div>
Thanks Harutyun, for your answer,
I've ended with this solution:
<div style="margin:0; padding:0px; width:100%; height:100%; display:table">
<div style="display: table-cell; vertical-align: middle;" >
<div style="background:#99FF33">
<div class="container">Content Goes Here.</div>
</div>
</div>
</div>
Related
<div id="outer" style="position:relative; width:100%; height:100%">
<div id="1" style="position:relative; width:25%; height:auto;"></div>
<div id="2" style="position:relative; width:65%; height:auto;">
<div id="2a" style="position:relative; width:15%; height:auto;"></div>
</div>
</div>
The problem is that the #2 and #2a are not aligned to #1 and I have to use top:-xxpx to align to top.
http://jsfiddle.net/D7HZR/
Fiddle. Is it what you are looking for?
#1, #2{
float:left;
}
Frankly speaking I'm not sure what you want. I think you want that :
<div id="outer" style="position:relative; width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="float:left; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="float:left; width:65%; height:400px;background:#ff0000;">2
<div id="2a" style="float:left; width:15%; height:auto;background:#000fff;">2a</div>
<div style="clear:both"></div>
</div>
</div>
http://jsfiddle.net/D7HZR/2/
Ok, i think that i've understand your problem, just add the display property on your divs of id 1 and 2
<div id="outer" style="width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="display: inline-block; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="display: inline-block; width:65%; height:400px;background:#ff0000;">
<div id="2a" style="width:15%; background:#000fff;"></div>
</div>
</div>
http://jsfiddle.net/p5KQJ/
#outer div {
float: left;
}
You also need to set a height on the inner div if you want it to take up vertical space.
It's unclear if you want the 3rd div nested or not so I made a fiddle that has one version nested and one with them all side by side.
FIDDLE here
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>
I've been going through documentation, tutorials and examples. But I can't seem to get these 4 boxes to align properly no matter what I do.
div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}
<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>
This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.
Just tweaked it a bit and it works fine.
CSS
div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}
HTML
<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>
As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing '=' sign)
see this working example http://jsfiddle.net/QFMXx/
change Id's in your code. Id's shouldn't start with digits
<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>
and css:
div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}
I have modified your code little bit and got the result. Could you please try this?
<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>
Hope this helps.
--Felix
Id must not start with a number. and maybe you can use the following style
<style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>
I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.
div#frontpage{width:100%; position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}
<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>
I am not sure,
I'm having problems setting an image as the right hand border to #left in the example below. Currently the border appears but it is about 200px to the right, rather than 500px to the right.
Any idea what's going wrong please?
Thanks!
<html>
<STYLE type="text/css">
#wrapper, #left, #right, .sub_box
{ border: 1px solid black; }
.sub_box
{ float:left; }
#left
{ background: url("dots.gif") right repeat-y; }
</STYLE>
<div id="wrapper" style="width:882px">
<div id="left" style="width:500px;float:left">
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
</div>
<div id="right" style="width:200px;float:right">
<p>Right column here</p>
</div>
</div>
</html>
Try this one...
background: url("dots.gif") 500px 0px repeat-y;
Or adjust, as you want.
I have a really, really simple CSS question that has already been asked here a thousand times already in different forms, and seems to have no definitive answer.
I just want to create three columns on an HTML page, using CSS. Doesn't matter about fixed-width versus liquid: just need three columns.
Here's a complete HTML page:
<html>
<body>
<div id="left" style="float:left; width:300px;">
<h3>Column 1</h3>
</div>
<div id="right" style="float:right; width:300px;">
<h3>Column 3</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
</body>
</html>
In Chrome, at least, this is pushing the left & right columns down below the middle. What is wrong?
like this?: http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/
just float everything left, and have the columns flow in the normal order in your HTML.
<div id="left">
<h3>Column 1</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
<div id="right">
<h3>Column 3</h3>
</div>
css:
#left {
background-color: red;
float:left;
width:200px;
}
#middle {
background-color: salmon;
float:left;
width:200px;
}
#right {
background-color: pink;
float:left;
width:200px;
}
if you don't want them to wrap, you can wrap a container div around them, or use
body {
width: 600px; /*combined width of three columns*/
margin: 0 auto;
}
http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/1/
float is sensitive to order. Put the left, then middle, then right.
Have you tried floating the middle section too?
You might try this
<html>
<body>
<div id="left" style="float:left; width:300px;border:1px solid black;">
<h3>Column 1</h3>
</div>
<div id="middle" style='float:left;width:600px;border:1px solid black;'>
<h3>Column 2</h3>
</div>
<div id="right" style="float:left; width:300px;border:1px solid black;">
<h3>Column 3</h3>
</div>
</body>
</html>