I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
Related
I am building a web page which has 3 DIV inside the main content left,right,right2.Here is a rough design:
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="right2"></div>
</div>
And here is the CSS for it:
#content {
height:auto;
overflow:auto;
}
#left {
float: left;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:hidden;
}
#right {
float: right;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:auto
}
#right2 {
float: right;
min-height:700px;
width: 450px;
background-color:#FFFFF0;
overflow:auto;
}
The issue is the 3 div's left,right and right2 do not fit according to the content size.Like if the main context increases,they stick to 700px height.If I give height:auto then the DIV aren't visible.
I have attached two images to help understand better:
So basically I want to make the size dynamic of the left and right DIV's too,but cannot find a way to do it.Thank you for any responses
Try to use
display:table-cell;
height:auto;
Nowadays I see this problem often
JS Fiddle
Please user below div structure and its css.
<div id="content" style="float: left; height: 700px; width: 100%;">
<div class="content_blk">first block content</div>
<div class="content_blk">second block content</div>
<div class="content_blk">third block content</div>
</div>
css
#content{
float: left;
height: 700px;
width: 100%;
}
.content_blk {
float: left;
height: 500px;
width: 100%;
}
I was working on a project for my college using Bootstrap CSS and I am stuck with fixing some alignment issues. What I wanted to achieve is align logo to the left(acquiring 35% of width) and aligning social plugin and Sign Up & Sign In button to the right(acquiring the leftover space i.e. 65%).
The issue I am facing right now is everything is aligned vertically! What I've coded so far is mentioned below. Would appreciate if someone fixes bug in my code rather than coming up with a new one.
Here is the HTML:
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
Here is the CSS:
#topBar {
width: 100%;
}
#topBar .topLeft {
width: 35%;
}
#topBar .topRight {
width: 65%;
}
#topBar .topRight .socialPlugin {
float: left;
}
#topBar. topRighht .signUpIn {
float: right;
}
Demo
Thank you
Leaving aside the fact that Bootstrap is not being used most of what you want can be solved by correctly applying float and clearing floats as necessary.
#topBar {
width: 100%;
overflow: hidden;
/* quick clearfix */
}
#topBar .topLeft {
width: 35%;
float: left;
background: lightblue;
}
#topBar .topRight {
width: 65%;
background: #bada55;
float: left;
}
#topBar .topRight .socialPlugin {
float: left;
width:50%;
}
#topBar. topRighht .signUpIn {
float: right;
width:50%;
}
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
It looks like for the most part you've just got a typo in the last selector of your css:
Change #topBar. topRighht .signUpIn to #topBar .topRight .signUpIn, which I did to your fiddle.
I have a code like
<div id="container" >
<div id="content"></div>
<table id="link" cellspacing=0px; cellpadding=0px;>
</table>
</div>
with css
#contentDiv {
width: 100%;
height:100%;
margin: 0;
}
#content {
width:90%;
height:60%;
margin-left:20px;
display: inline;
vertical-align: left;
z-index:40;
}
#link {
width:30%;
height:50%;
margin: 0;
margin-top:10px;
margin-right:10px;
float: right;
z-index:70;
}
i want it to display like
without absolute div floating over table
but its not displaying like that any help is appreciated?
Use a floating div but make the left-margin of the div a negative number so it 'floats' over the table
For example:
CSS:
#container {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
#content {
width: 60px;
margin-right: -30px;
height: 60px;
float: right;
background-color: green;
}
HTML:
<div id="container">
<div id="content"></div>
</div>
works fine.
First: You have a container element, but no CSS statements tied to it. And you have a contentDiv CSS statement, but no corresponding HTML element.
Second: As davblayn mentioned, you can use a negative margin-left value.
#link {
...
margin-right:-40px;
...
}
See an example here (JSFiddle).
If you change the display property of each table element to block, it will force the table back into block mode and then everything works fine.
<div style="float:right;background:red;width:200px;">This is a test.</div>
<table style="display:block;background:green;">
<tr style="display:block;">
<td style="display:block;">
This is a very long string. This string should break to the next line instead of spanning across like usual.
</td>
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
How to use div+css make three columns in html.
left and right columns width:auto, and middle one need width:990px(should be in the center) and they are height:100%.
HTML
<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div>
<div style=" float:left; width:990px; height: 100%;">Area2</div>
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div>
For this type of functionality you can use display:table property for this. Like this:
html,body{height:100%;}
div{
display:table-cell;
height:100%;
vertical-align:top;
}
Check this http://jsfiddle.net/K5H4e/
But it's not work till IE7 & below.
this will be easier using a table with three column .
general you shoud use something like this: Example on js-fiddle.
<div style="float:left; background-color:#006;" >Area1</div>
<div style="float:right; background-color:#006633;">Area3</div>
<div style="border:1px solid red;overflow:auto;" >Area2</div>
Note: You won't get the height of the rows align that easily, since they are independent elements.
EDIT:
in order to have the height:100%work on your divs, you need the following:
html, body {
margin: 0;
padding: 0;
height: 100%; /* important! */
}
div {
min-height: 100%;
}
EDIT2: updated fiddle
<div class="Division"><p>First Division</p></div>
<div class="Division"><p>Second Division</p></div>
<div class="Division"><p>Third Division</p></div>
.Division{
float: left;
width: 100px;
height: 200px;
border: 2px solid #000000;
margin-left: 10px;
}
How about this: jsfiddle
<div style="width:auto; height: 100%;background-color:#006;
display: inline">Area</div>
<div style="width:990px; height: 100%; display: inline">Area2</div>
<div style="width:auto; height: 100%;background-color:#006633;
display:inline">Area3</div>