I have a two div columns (ColumnA and ColumnB) within MasterParent div. These two columns are using float:left. OK no problem. works.
Now, within ColumnB I want 3 more separate columns (Column1,2,3).
I float column1,2,3 all left so they butt up together but when I go to start a new line and clear the previous column floats, it clears all the way up to the MasterParent and drops the next line below the horizontal position of the bottom of ColumnA.
Is there a way to only clear up through ColumnB and not all the way up to the MasterPArent div?
You can not clear anything, and add overflow: hidden to your MasterParent div. Check out this jsFiddle.
Here is the code:
.Container
{
overflow: hidden;
}
.Col1
{
float: left;
width: 50%;
}
.Col2
{
float: left;
width: 50%;
}
.Col2a
{
float: left;
width: 33%;
}
.Col2b
{
float: left;
width: 33%;
}
.Col2c
{
float: left;
width: 33%;
}
<div class="Container">
<div class="Col1">
<p>Column 1</p>
</div>
<div class="Col2">
<p>Column 2</p>
<div class="Col2a">2a</div>
<div class="Col2b">2b</div>
<div class="Col2c">2c</div>
</div>
</div>
Related
I have a container div called main and then two divs floated left. The problem is that I need the main div background color visible (I supposed that the blue color background should be visible on the right side (300px which remains) and at the 4th row of the medium div as it is lower div than the left div). I also need both left and medium divs to automatically increase their heights on words wrapping and as you can see it does not work in the grey (middle) div.
See the http://jsfiddle.net/djqfo3we/2/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
You have to clear the floats otherwise the margins of the parent collapse and it appears that the parent has no height.
There are various techniques for clearing floats and you can find out more with a simple search
As for the text wrapping, as you have discovered long text strings won't break by themselves.
You can force a word break using word-wrap:break-word and leave your original text unchanged.
.main {
width: 500px;
background-color: blue;
overflow: hidden; /* quick clearfix */
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
Add a div inside the main div but at the bottom called clear:
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
Then give the class clear a style:
.clear {
clear: both;
}
and you get this: http://jsfiddle.net/djqfo3we/4/
EDIT:
As others have pointed out, in order to apply a wrap so that they stay within the set width dimensions, add the style word-wrap: break-word; to the content you want to have wrapped.
I've applied the word-wrap to both the middle and left div within the main div.
updated jsfiddle: http://jsfiddle.net/djqfo3we/10/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
.clear {
clear: both;
}
.middle, .left {
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
I would like to create a specific layout in html but have some dificulties.
Images are easier to understand than words, so here is what I have:
This is fine, but as soon as the div1 gets heigher, I will have this:
And my goal is to have something like that:
For the moment, I am using divs, which is probably not the good idea. Any help is welcome.
Thank you very much in advance.
Divs are a great way to do it. You can use a floated layout with a containing div around the two right divs. Here is some code to show you what I mean:
HTML
<div id="wrapper" class="clearfix">
<div id="sidebar"></div>
<div id="main_content">
<div id="top_right"></div>
<div id="bottom_right"></div>
</div>
</div>
CSS
#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* IE < 8 */
}
Here is a JS fiddle link to show you how it looks: http://jsfiddle.net/ddxYB/
Make sure to clear the wrapper div. Because it contains only floated elements, it will have no height if you don't. In the example I used, I set heights to save time, but this would just as well if you used automatic heights and let the divs take on the height of the content.
This is a screenshot from the JSFiddle code:
First you have to understand concept of a container.
Create 2 containers as columns:
A left column containing div1
A right column containing div2 and div3
So for the HTML create a structure like this:
<div class="col1">
<div>div 1</div>
</div>
<div class="col2">
<div>div 2</div>
<div>div 3</div>
</div>
And positioning columns with CSS:
div.col1 {
float: left;
width: 200px;
}
div.col2 {
float: left;
width: 400px;
}
Set your CSS position of each div to absolute and position them using margin.
#divName {
position: absolute;
margin: 10px 10px 10px 10px; //position them wherever you want.
}
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.
I new to webdesign and I wonder how I could do something like this:
..........................
LEFT --- CENTER ---- RIGHT
..........................
Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.
This is how it looks now.
My current HTML:
<div id="container_m">
<div id="left">
<p>My name is Barnabas</p>
</div>
<div id="right">
<p>Till salu</p>
</div>
<div id="center">
<p>Senaste nytt</p>
</div>
</div>
My currrent CSS:
#container_m
{
position:absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#left
{
position: relative;
height: 100%;
width: 33%;
float: left;
background-color: blue;
}
#right
{
position: relative;
height: 100%;
width: 33%;
float: right;
background-color: green;
}
#center
{
position: relative;
height: 100%;
width: 33%;
margin:0 auto;
background-color: yellow;
}
Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:
<div style="clear: both;"></div>
This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.
whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:
<div id="parent">
<div id="left">
Left Content
</div>
<div id="center">
Center Content
</div>
<div id="right">
Right Content
</div>
</div>
And then float them all left. :)
You can simplify that hugely: http://www.jsfiddle.net/fsnuh/
HTML:
ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds
<div id="container_m">
<div class="red">
<p>My name is Barnabas</p>
</div>
<div class="yellow">
<p>Till salu</p>
</div>
<div class="green">
<p>Senaste nytt</p>
</div>
</div>
CSS
Styles for left, right and center combined into one. Overuse of position: relative removed.
#container_m
{
position: absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#container_m div
{
height: 100%;
width: 33.33%;
float: left;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.yellow
{
background-color: yellow;
}
I have the following setup for a 3 column layout:
#column-menu {
float: left;
width: 25%;
}
#column-main {
float: right;
width: 55%;
}
#column-side {
float: left;
width: 20%;
}
This code works with the following html:
<div id="column-side">my right side content</div>
<div id="column-main">my main content</div>
<div id="column-menu">my sub menu</div>
I'm not committed to using floats. It just so happens that it works with the above structure, except for when nothing is in column-side. In that case I would like column-main to cover the additional width and not be constrained to 55%. Is there a way to build that kind of flexibility with CSS alone?
If you want to do it with floats, you will have to reorder your elements:
.column-side {
float: left;
width: 20%;
background: #00ffff;
}
.column-menu {
float: left;
width: 25%;
background: #00ff00;
}
.column-main {
overflow: hidden;
background: #ffff00;
}
<div class="column-side">Side</div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
<hr />
<div class="column-side"></div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
then in that case you want something like this:
if you remove <div id="column-menu" class="align">my sub menu</div> you will see how it works with proper fluidity.
.wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#column-menu {
width: 25%;
background: red;
}
#column-main {
width: 55%;
background: blue;
}
#column-side {
width: 25%;
background: green;
}
<div class="wrapper">
<div id="column-side" class="align">my right side content</div>
<div id="column-main" class="align">my main content</div>
<div id="column-menu" class="align">my sub menu</div>
</div>
A quick explanation of what's going on here:
you are using table-layout:fixed; it will automatically equally proportion the child elements with the relative css rule which in this case is display:table-cell;
Now because we don't want it to be equal we set the percentages but because of the fixed property when a div is removed the remaining two div's will just span proportionality and auto calculate what there widths should be to still take up the full width of the container.