I have the following HTML code:
<div class="main">
<div class="container">
<div class="contents">
Some funny stuff in here
</div>
</div>
</div>
With the following CSS:
.main {
overflow: auto;
width: 200px;
}
.container {
border: 1px solid black;
}
.contents {
width: 300px;
}
This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):
main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
So, as contents div is 300px wide, it scrolls horizontally.
So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.
How come? I want it to be as wide as its contents (300px), how can I achieve that?
You just need to make you container float
.container {
border: 1px solid black;
float: left;
}
Float will automatically adjust your outer div to inner div width.
You need to slightly adjust your CSS. This will work:
.main {
overflow: auto;
width: 200px;
float: left;
}
.container {
border: 1px solid black;
float: left;
}
.contents {
width: 300px;
float: left;
}
Actually you should add the overflow: auto in container css not main css
Related
Hi, i want to make this layout.
I am trying to do it in this way:
<div class="container" >
<div class="picture_cont">...</div>
<div class="info">...</div>
<div class="price">...</div>
</div>
And CSS
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
}
.container .info {
float: left;
}
But i am getting this picture:
There is some issue with right column.
How to make it right ?
A mix of relative and absolute positioning will also do the trick. Something like this:
.container{position:relative;}
.picture_cont{position:absolute;left:0;top:0;bottom:0;width:100px;border-right:...}
.info{position:absolute;left:101px;top:0;bottom:0;right:151px;}
.price{position:absolute;right:0;top:0;bottom:0;left:150px;border-left:...}
Here's a fiddle to demonstrate.
you are missing overflow:auto;
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
overflow:auto;
}
.container .info {
float: left;
}
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces a new block formatting context restoring the flow of the .info container to be independent of the floated sidebars. (Note that you need to be careful of collapsing margins and non-staticly positioned elements to avoid scrollbars).
HTML
<div class="container" >
<div class="picture_cont">...</div>
<div class="price">...</div>
<div class="info">text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
CSS
...
.container .info {
overflow: auto;
}
Fiddle Demo
Source: http://jsfiddle.net/StMLm/
Demo: http://jsfiddle.net/StMLm/show
Because the items are floated and the middle has no specified width, the last item will "feel" the text of the second ("info") and be bumped down below it -- there is nothing telling info that, instead, it should stop 200px from the right edge. (150px? -- your picture and CSS don't match up)
One way to achieve that is to put right-padding of 200px (150px?) on info and then move the right-column into place with some CSS trickery: see In Search of the Holy Grail for this classic solution.
A newer approach is to use display:table on the container display:table-cell on the 3 inner parts, set the width's on the left- and right-columns, and be done with it.
You're using floats, so all your containers are independant, which means you can't base position and size on other containers. So in your case you'll have to specify a width for your containers so that they are fixed and don't overlap each other.
Also try and put a "top" of 0px on your price container. This should help out.
I typically use "inline-blocks" and fluid widths. This nice thing about this method is you can add a "min-width: 240px" and your UI will stack on mobile devices. (jsFiddle)
div.container {
width: 100%;
}
div.container div {
border: 1px solid blue;
overflow: auto;
height: 10em;
display: inline-block;
margin: -3px;
padding:0;
}
div.info {
width: 70%;
}
div.picture_cont,
div.price {
width: 15%;
}
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
How do I implement this layout (which is build using a table) with DIVs?
Basically I want to have two divs on the same line: Div1 and Div2. Div1 should be aligned to the left, Div2 – to the right. Div2 has also minimal width being set. When the width is not enough for both of them then Div1 one must wrap its content giving space to Div2. Whatever I have tried the Div2 always was moved under the Div1 before the content of Div1 was wrapped.
So I came up with solution made with a table. How to build same layout using DIVs?
Solution with a table:
<!DOCTYPE html>
<html>
<head>
<style>
#table {
width: 100%;
word-wrap: break-word;
}
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td id="div1">This text should wrap when window is made smaller.
<td id="div2">This takes 30% but not less than 250px;
</table>
</body>
</html>
HTML:
<div id="wrapper">
<div id="left"></div>
</div id="right"></div>
</div>
CSS:
#wrapper {
width: 100%;
float: left;
}
#left {
border: 1px solid red;
float: left;
}
#right {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
float: left;
}
Didn't test it, but it shall work.
Regards.
Is this something you were looking for? http://jsfiddle.net/fFkNW/3/
I changed the markup to use divs and updated the CSS to use floats
If you make the window smaller, you can see the red box start to wrap around the green box.
HTML
<div id="div2">This takes 30% but not less than 250px.</div>
<div id="div1">This text should wrap when window is made smaller.</div>
CSS
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
float: right;
border: 1px solid green;
}
Try taking a look at CSS box-flex.
One of the most high fidelity ways to do this would be to simply use divs displayed as a table:
#table {
width: 100%;
word-wrap: break-word;
display: table;
}
#table > div {
display: table-row;
}
#div1, #div2 {
display: table-cell;
}
You can see here that it looks exactly the same.
I have two DIVs inside one DIV. One of the DIVs is floated left, and so, the other div is to fill outer window.
If I enlarge or shrink the outer DIV I want inside DIVs to fill outer DIV in any case.
The sample code:
<div id="main_container">
<div id="left_container"></div>
<div id="right_container"></div>
</div>
and CSS rules are
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
}
#left_container{
margin: 10px;
height: 100px;
border: 1px solid red;
float: left;
overflow: hidden;
min-width: 200px;
}
#right_container{
margin: 10px;
height: 100px;
border: 1px solid magenta;
min-width: 200px;
overflow: hidden;
}
Here is the jsfiddle code.
Reize the html window, you will see red one is not filling it when the other is on the bottom.
Edit: To clarify, I added images
#media screen and (max-width: 441px) {
#left_container{
float: none;
}
}
441px just an example (two blocks min-width + side margins + border - 1).
Add
width: 98%;
(Adjust as necessary)
To #left_container and #right_container
Give min-width to the main div.
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
min-width: 400px;
}
In this sample, is there any way to align the "sidebar" div to the left so it sticks to "main" div, without setting margin or position manually?
<div id="wrapper" style="width:1000px;">
<div id="sidebar" style="width:20px; float:right;">Sidebar</div>
<div id="main" style="width:500px; margin:auto;">Main</div>
</div>
You could make both the main and sidebar div float to one side, and center the whole thing by making wrapper tighter and giving the wrapper auto margins. The CSS:
#wrapper {
width: 525px;
margin: auto;
}
#sidebar {
width: 20px;
float: right;
border: thin solid red;
}
#main {
width: 500px;
border: thin solid black;
float: right;
}
You can see the results here, http://jsfiddle.net/BkFgX/