I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
Related
I'm trying to make a website using html and css.
I have put 5 divs next to each other and there width and height depends on the size of the window. Then I have put images in each of those divs. the size of those pictures also depends on the size of the window.
The problem that I'm having is that only a part of my image is shown in the div.
The code:
<div id="cotainer">
<div id="bar1"><img src="modern_combat_1.jpg"></div>
<div id="bar2"><img src="modern_combat_2.jpg"></div>
<div id="bar3"><img src="modern_combat_3.jpg"></div>
<div id="bar4"><img src="modern_combat_4.jpg"></div>
<div id="bar5"><img src="modern_combat_5.jpg"></div></div>
this is the style:
html, body{margin:0;padding: 0;border:0;}
#bar1 {top:35%;width:20%;bottom:35%;background-color:red;position:absolute;}
#bar2 {top:35%;left:20%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar3 {top:35%;left:40%;right:0;bottom:35%;background-color:yellow;position:absolute;}
#bar4 {top:35%;left:60%;right:0;bottom:35%;background-color:red;position:absolute;}
#bar5 {top:35%;left:80%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar1 img{
width:100%;
height:100%;
}
#bar2 img{
width:100%;
height:100%;
}
#bar3 img{
width:100%;
height:100%;
}
#bar4 img{
width:100%;
height:100%;
}
#bar5 img{
width:100%;
height:100%;
}
Tthe result is that the 3 pictures in the middle aren't completely shown in the divs
can someone help me so that the 3 pictures in the middle are shown completely
You have giver width to #bar1 div only.
Give width to the rest of divs also.
Write:
#bar1,#bar2,#bar3,#bar4,#bar5{width:20%;}
Fiddle here.
Also try using max-width:100% for images;
I am in need of some help with some divs.
I currently have
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
and I am trying to make it so the following occurs.
Left div aligns against left side of the screen, while right aligns to the right. The main then would be 1000px wide and be in the middle of the page
| Left Div | Main div 1000px wide | Right div |
I have seen this done using tables but I'd rather use a div to create my layout.
the main div will have other divs inside it for contents so I will also need the left and right divs height being the same as the main div.
Anyone able to help?
Regards,
Mason
You can do table-like layouts using divs. Check out the table-* values for CSS display.
http://jsfiddle.net/MVSjr/
HTML
<div class="table">
<div>
<div id="left">test</div>
<div id="center">test</div>
<div id="right">test</div>
</div>
</div>
CSS
#left {
background:#F00
}
#center {
background:#0F0;
width: 300px;
}
#right {
background:#00F
}
.table {
display:table;
width:100%;
}
.table > * {
display:table-row;
}
.table > * > * {
height: 200px;
display:table-cell
}
If you want a constant distance between the left / right divs to the main one, you'll have to specify it. My advise is to specify a page width, say 1300 px, and then split div's measures as you need (e.g: 150px for the left div, 1000px for the middle, 150px for the right. And then center the wrapper div to the page.
.wrapper{
width: 1300px;
margin: auto;
}
.left{
width:150px;
}
.main{
width:1000px;
}
.right{
width:150px;
}
You might also want to consider making it responsive either by specifying width in % if your content allows it or by specifying break-points in media-queries, but it's just a thought...
You are looking for three column layout for your web page. Three column layout can be either fixed or fluid.
In Fixed layout all the three columns would have the fixed width and when you re-size your browser screen, they will display with horizontal scroll bar.
In Fluid layout all the three columns would have width in percentage of screen width. Here is an example of three column fluid layout.
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
and CSS
div{
display:inline-block;
height:500px;
}
.left,.right{
background:red;
width:15%;
}
.main{
background:green;
width:70%;
}
Js Fiddle Demo
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo