I am new to html and css. I coded a html page with css but confused.
I used this css code
#container {
background: #000000;
width: 500px;
margin: auto;
}
#left {
background: #FF0000;
width: 200px;
float: left;
}
#right {
background: #0000FF;
width: 200px;
float: right;
}
and this html code
<div id="container">
<div id="left">This is left</div>
<div id="right">This is right</div>
</div>
But I didn't got black background that I specified in #container.
Can you help me with that. I want background to move automatically as i write content. in between divs having id container.
this is because you are using Float for your inner divs and the container does not contain any text,
try this
<div id="container">
hello <br>
<div id="left">This is left</div>
<div id="right">This is right</div>
<br><br>
</div>
Set the #container to
float: left;
or
display:inline-block;
Click here for live example.
This will works fine for you
#container {border:2px solid #cccccc;
height:50px;
background-color: #000000;
width: 500px;
margin: auto;
}
Related
I have 4 divs
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
and I need to align them in a "square" order:
I've tried to float-left only 2°div and 4°div, but it does not work.
Unfortunately I can't use
a container with a defined width and all divs left-floated
<div id="container" style="width: 250px">
<div id="first" style="float: left"></div>
<div id="second" style="float: left"></div>
<div id="third" style="float: left"></div>
<div id="fourth" style="float: left"></div>
</div>
or position absolute/relative left, top etc. in my actual project...
So I hope that there is some float trick to solve my problem..
<style>
.divSquare{
width:48%; height:200px; margin:4px; border:1px solid black; float: left
}
</style>
<div class="divSquare">1</div>
<div class="divSquare">2</div>
<div style='clear:both'></div>
<div class="divSquare">3</div>
<div class="divSquare">4</div>
I assume you can define the Height explicitly, and you CAN set a percentage Width.
The divSquare's Width is set to 48% (less than 50%) because the 4px margin and 1px border occupy room either.
JSFiddle to see this in action.
Have you tried using clear? Check this example:
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
div { height: 100px; float: left; width: 100px; }
#a { background: blue; }
#b { background: red; }
#c { background: green; clear: left; }
#d { background: black; }
http://jsfiddle.net/T5X9A/
I'm faking a square with the height: 0; & padding-bottom: 50% - but besides that - the floating part should be clear. Here is a jsFiddle too. I also didn't prefix the box-sizing... - you can google it. Good luck!
HTML
<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.block {
width: 50%;
float: left;
height: 0;
padding-bottom: 50%;
}
.one {
background: yellow;
}
.two {
background: lightblue;
}
.three {
background: orange;
}
.four {
background: red;
}
Does a simple clear float work? This HTML appears to do what you want:
<html>
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 8px;
}
#third {
clear: left;
}
</style>
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
</body>
</html>
It really is based on the width of the four divs. The container has a width of 250px so if the first two divs are 125px in width then they'll fill up the first row pushing all the remain divs down. If the divs were all width: 50% that'll have the same effect. If the div's widths were anything less than 33.3333% then the at least three divs will pile up in the first row. Float left allows the boxes to go side by side until it hits the parent's width limit. What you can do is control the width by:
#container > div {
width: 50%;
}
Or you can clear the floats every third div.
#container > div:nth-of-type(3n + 3) {
clear: both;
}
http://jsfiddle.net/3ssKK/1/
Just wondering if this is possible for css, i am try to have a layout where left hand column have a fixed width and right hand side have a flex width within a contain of fixed width.
here is the attachment for image
Thanks for any suggestion.
Check if this can help you
HTML
<div class="outer">
<div class="left">Test</div>
<div class="right">Test</div>
</div>
CSS
*{margin: 0}
.outer {
max-width: 1444px;
}
.left {
float: left;
width: 200px;
height: 600px;
background: red
}
.right {
margin-left: 200px;
background: yellow;
height: 600px;
}
You can do it with a table for sure. Not sure if anyone has a better/alternate method.
<html>
<head>
<style>
.container { width:400px; }
.left { width:100px; background-color:red;}
.right { width:100%; background-color:yellow;}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="left">left section</td>
<td class="right">right section</td>
</tr>
</table>
</body>
</html>
You can achieve it by using the following code. Basically we are floating the left side div with fixed width and letting the right side div take up the rest.
HTML:
<div class='container'>
<div class='fixed-left'>abcd</div>
<div class='flexible'>12345</div>
</div>
CSS:
.container{
border: 1px solid black;
max-width: 440px;
}
.fixed-left{
float: left;
width: 200px;
border: 1px solid blue;
}
.flexible{
border: 1px solid red;
width: 100%;
}
Demo|Demo without Margin
You could use float for that:
HTML:
<div class="left-div">This is left DIV with lots of text text text text<br />and even more text</div>
<div class="right-div">
<div class="upper">This is upper right DIV</div>
<div class="lower">This is lower right DIV</div>
</div>
CSS:
.left-div {
width: 200px;
float: left;
}
.right-div {
float: right;
}
.upper {
max-width: 100%;
}
.lower {
max-width: 1444px;
}
Fiddle: http://jsfiddle.net/68u8N/
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
I have simple structure with container and inside boxes:
<div id="container">
<div class="block"></div>
// more blocks
<div class="block"></div>
</div>
What I would like to achieve is to center boxes inside this container but to pack them as much as possible in a one line. The same I can do using JS: http://jsfiddle.net/JhxSd/ but I would like to avoid that, and use only CSS. Is that possible?
#media queries
Use a set of #media queries to define different layouts for the grid based on the current screen size. The only part of the layout that needs to vary is the width of the grid wrapper.
For all practical purposes, this is the only CSS solution available at present. For an explanation of why #media queries are appropriate, and why other available CSS options won't work, see this answer.
JSFiddle Demo
The above demo has #media queries for screen sizes up to 1200px wide (more can be added as needed), and does not use JavaScript. The rendered width of #container is always 75% (not counting the border), and the grid is centered within #container.
Note: This solution requires adding a wrapper div around the blocks. In each #media query, the width of the wrapper is just enough to fit the number of columns appropriate for the current screen size. The fixed wrapper width is what allows the grid as a whole to be centered within #container. If editing the static HTML isn't an option, the wrapper div can be added when the page loads using jQuery.
HTML
<div id="container">
<div class="grid-wrapper">
<div class="block"></div>
...
</div>
</div>
CSS
#container {
width: 75%;
...
}
.grid-wrapper {
margin: 0 auto;
width: 70px; /* Default: 1 column */
}
#media (min-width: 200px) {
.grid-wrapper {width: 140px;} /* 2 columns */
}
#media (min-width: 290px) {
.grid-wrapper {width: 210px;} /* 3 columns */
}
...
I hope this will do the trick:
http://jsfiddle.net/CnjZR/1/
<div id="container">
<div id="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS:
#container {
width: 100%;
overflow: hidden;
background: red;
text-align: center;
}
.block {
width: 20px;
height: 20px;
background: blue;
float: left;
margin: 5px;
}
#wrap {
background: green;
overflow: hidden;
display: inline-block;
}
Not too sure if you where looking for something like 'flex-justify' , I added in the demo a turn around based on inline-boxes behavior and text-align values.
edit : point cleared: text-align:center ; is it.
http://jsfiddle.net/JhxSd/10/
The point is you should not use float, but display.
Float is not friendly with centering , nor vertical nor horizontal, since it is not standing in the natural flow of the document.
#container {
width: 75%;
border: 1px solid;
text-align:center;
overflow:hidden;
padding:1em 1em 0;
box-sizing:border-box;
float:left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
display:inline-block;
margin: 10px;
}
I think, everything you have almost done already.
#container {
width: 75%;
border: 1px solid;
float: left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin: 10px;
overflow: hidden;
}
http://jsfiddle.net/JhxSd/3/
Try this:
#container {
width: 75%;
border: 1px solid;
float: left;
overflow: hidden;
text-align: center;
}
#container .block {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
margin: 10px;
}
If you truly need everything left-aligned then I think you're out of luck with just CSS.
You can use the text-align:justify for the container and use the display:inline-block for the div.block. but you need add some placeholder tag at the last.Like this:
HTML
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
CSS
.wrapper {
width: 75%;
border: 1px solid;
font-size: 0.1px;
text-align: justify;
}
.wrapper:after {
content:"";
display:inline-block;
width: 100%;
}
.wrapper div{
font-size: 16px;
display:inline-block;
*display: inline;
zoom:1;
color: #fff;
background-color:blue;
width: 50px;
height: 50px;
margin: 10px;
}
.wrapper .placeholder {
width: 50px;
height: 0px;
background:none;
}
Please view the demo. A detailed tutorial, please click here.
I know this is kind of a stupid doubt about floating CSS layout, but I can't find the answer anywhere.
I want to have a simple page, with a big red reactangle in the middle, and 2 blue squares within, one on each side of the rectagle.
I have the following HTML code:
<body>
<div id="rectangle">
<div id="left"></div>
<div id="right></div>
</div>
</body>
and then I have this css:
#rectangle {
width: 600px;
margin: auto;
padding: 50px;
background-color: red;
}
#left {
float: left;
width: 250px;
height: 250px;
background-color: blue;
}
#right {
float: right;
width: 250px;
height: 250px;
background-color: blue;
}
And this doesn't work, because the red rectangle doesn't adapt its height to cover the blue squares because they are floating I guess...
The only way I know to solve this is adding a new
<div id="footer"></div>
at the end of the rectangle div, with style
clear: both;
and I'm sure there should be a more elegant way to do this, isn't there?
Simply add overflow: auto to the #rectangle div.
Example: http://jsfiddle.net/ZVJQN/
add clear div
<div id="rectangle">
<div id="right"></div>
<div id="left"></div>
<div class="clear"></div>
</div>
.clear
{
clear:both;
}