<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
Related
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>
With Bootstrap 3, I'm trying to make an image stay within the boundaries of it's parent div.
This works fine for width, but no matter what I try, the image keeps falling out of the bottom of the parent div, because it's height doesn't update when I decrease browser height. Is it possible to make this work ? If so, how ? Thanks.
JSFiddle : http://jsfiddle.net/rensdenobel/9486t/
HTML :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
<div class="content">
<div id="text">You chose this photo :</div>
<div id="thumbnail-container">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
<div id="button-share">
<button class="btn btn-success">Share it !</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div>
</div>
CSS :
html, body {
height:100%;
}
.container {
height:100%;
width:100%;
border:1px solid blue;
}
.row {
border:1px solid green;
height:100%;
}
.center {
display:table;
border:1px solid red;
padding-top:12px;
padding-bottom:12px;
text-align:center;
height:100%;
max-height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:auto;
border:1px solid green;
}
#thumbnail-image {
margin-left:auto;
margin-right:auto;
height:auto;
}
#thumbnail-container{
width:100%;
border:1px solid pink;
max-height:70%;
height:70%;
margin-top:12px;
margin-bottom:12px;
}
try
<div id="thumbnail-container col-sm-4 col-xs-4">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
change the col-sm-* and col-xs-* to get your desired output
This approach works for me. Please try adding this to your css:
.container {
height:max-content;
}
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 have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html