div alignment one left next two top bottom last one right
it is nt coming like that when I'm doing
see this image
I would like to align the image like that with div tag, unfortunately when i aligned its not coming up like that,
how do i leyout all the images inside one div tag>?
here is my html code
<div class="site_contents">
<div class="header">
<div class="big_logo"></div>
<div class="work_nav"></div>
<div class="testimonial"></div>
<div class="cliants"></div>
<div class="testimonial"></div>
<div class="contact"></div>
</div>
</div
here is my css code
.site_contents {
height:auto;
width: 900px;
background-color: #666;
margin:0 auto;
}
.header {
background-color: #3CF;
height: 262px;
width:100%;
clear:both;
position:relative;
border:2px solid #000;
}
.header div
{
float: left;
}
.big_logo{
background-color: #06C;
height: 262px;
width: 459px;
background: url(images/sitetemplate_header.gif) 0 -21px;
}
.work_nav {
background-color: #F00;
height: 159px;
width: 170px;
}
.testimonial {
background-color: #3F9;
height: 104px;
width: 170px;
}
.cliants {
background-color: #09C;
height: 262px;
width: 171px;
}
.contact {
background-color: #30C;
height: 262px;
width: 101px;
}
could any one help me please
This is almost what you want. http://jsfiddle.net/
You need to be careful about a number of things.
work_nav and testimonial need to be in a separate div which I have included (container2)
The total width needs to be adjusted. I have changed it as well. You can play with it to make it according to what you need.
I have included borders as well to recognize each box. You should remove those borders and the width taken by the borders must be subtracted from the total current width. That means adjust the current width again.
Related
I have two divs next to each other. The div on the right is 300px x 335px. The div on the left goes all the way down the page. I want the width of the left div to go all the way until the right div. Then under the right div, it takes up the whole width of the page. Is this possible?
div elements are block level elements. So they are like square blocks. No, they can't work as you ask. However, you might Google for CSS Shapes to see if it can do what you wish but it's not available in all browsers and still isn't exactly the same as you request.
Here is some option either you can add min-width to the short div and long div to extend it. or you can add a background-color body to fake the illusion of it. but like Rob said there is no good way that can work out.
.short {
width: 100px; height: 100px;
background:red;
float:left;
//min-height: 500px;
}
.long {
width: 100px; height: 500px;
background:blue;
float:left;
//min-height: 500px;
}
.width {
width: 100%;
height: 200px;
background:yellow;
}
.clearfix {
overflow: auto;
zoom: 1;
}
body {
// background-color: red;
}
<div class="clearfix">
<div class="short"></div>
<div class="long"></div>
</div>
<div class="width"></div>
That is not possible, although you could always put another div under the one on the right and set the margin so that it looks like it's part of the one on the left.
This is one of the method to achieve what you want
CSS
#left1 {
margin-right: 300px;
height: 335px;
background: #aaa;
}
#right {
width: 300px;
height: 335px;
float: right;
}
#left2 {
background: #aaa;
border: 1px soild #000;
min-height: 300px;
}
<div id="right"></div>
<div id="left1"></div>
<div id="left2"></div>
I have 2 divs with position:absolute set, looking as such:
#nav {
position:absolute;
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%:
height: 100%;
}
The #content div often exceeds the pages size, requiring the user to scroll down.
But the #nav div stops at the bottom of the screen - it does not continue down the page as the user scrolls.
Is there any way to make both divs have equal height (without JQuery)?
You can do this with css tables. (but you'll have to remove position:absolute)
FIDDLE
Markup
<div id="css-table">
<div class="col narrow">some content</div>
<div class="col wide">content</div>
</div>
CSS
#css-table {
display: table;
height: 100%;
}
#css-table .col {
display: table-cell;
padding: 10px;
}
.narrow
{
background: lime;
}
.wide
{
background:aqua;
}
You could try a fixed positioning over the #nav.
So, instead of position: absolute;
try position: fixed only for the first div, i.e. #nav. This should make it always be on the screen no matter how much the user scrolls.
try these css
#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}
Since OP has not accepted any answer, m trying my luck.... :)I think the fault is in line width: 70%: for #content....there is : instead of ;...i tried your code here after replacing it in fiddle and looks fine to me :
Fiddle : http://jsfiddle.net/logintomyk/LDh5x/2/
HTML remaining the same, here is the CSS
#nav {
position:absolute;
border:1px solid #000; //to show the different divs
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%; //this was mistake point
height: 100%;
text-align:right; //to show the text
border:1px solid #CCC; //to show the different divs
}
I want to make a multi-segment progress bar.
It has to be horizontally centered, with a maximum width, but not a static one, so it can shrink if there is not enough space.
The problem is that sometimes the total progress is at 100%, but the segments could be at 33.33% and 66.66%.
The percentages are being calculated based on the width of the document, which may be an odd number, so the bar segments' widths are rounded in a way that leaves one pixel empty on the bar.
HTML
<div class="CENTER">
<div class="BAR">
<div class="SEGMENT ONE" style="width: 33.33%;"></div>
<div class="SEGMENT TWO" style="width: 66.66%;"></div>
</div>
</div>
CSS
.CENTER {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.BAR {
height: 10px;
}
.SEGMENT {
float: left;
height: 100%;
}
.BAR { background-color: #F00; border: 1px solid #000; }
.SEGMENT.ONE { background-color: #FDA; }
.SEGMENT.TWO { background-color: #ADF; }
Play around with the width of the window after it's big enough for the bar to reach its maximum width.
There will be a red one pixel wide section on the right side of the bar.
How can I avoid it?
Example: http://jsfiddle.net/CV6fp
Can you do it using that same HTML and without JavaScript, CSS?
Maybe with table display?
http://jsfiddle.net/CV6fp/6/
.CENTER {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.BAR {
height: 10px;
display: table;
width: 100%;
}
.SEGMENT {
display: table-cell;
height: 100%;
}
.BAR { background-color: #F00; border: 1px solid #000; }
.SEGMENT.ONE { background-color: #FDA; }
.SEGMENT.TWO { background-color: #ADF; }
Here is how I would do it:
http://jsfiddle.net/CV6fp/3/
Basically, drop the width property off the div with class TWO. Then make the same div NOT float left:
<div class="CENTER">
<div class="BAR">
<div class="SEGMENT ONE" style="width: 33.33%;"></div>
<div class="SEGMENT TWO"> </div>
</div>
</div>
And the style change:
.SEGMENT.TWO { background-color: #ADF; float:none; }
This means that second segment no longer floats:left, but I do think this may be what you are looking for.
Update: And finally after much soul searching, a CSS only solution to solve all the issues mentioned on this page:
http://jsfiddle.net/CV6fp/7/
Two changes to CSS: (1) segments set to float:right, and (2) .SEGEMENT.ONE to override that and always float:left
.SEGMENT {
float: right;
height: 100%;
}
.SEGMENT.ONE { background-color: #FDA; float:left; }
In this case you may need to reduce accuracy to the tenth's place and use a ceiling rounding function on the final segment. This way you would get 33.3% and 66.7%.
Try: .SEGMENT:last-child { float: none; width: auto !important; }. This should make the last segment to fill the remaining space.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.