I want to remove the margin around a #header. It should be the same slim margin as in the #content box. In the first place, I do not understand, why #header and #content have different margins.
Any pointers are appreciate
#box {
background-color: lightgreen;
}
#header {
background-color: grey;
float: right;
width: 150px;
text-align: center;
padding: 0;
margin: 0;
}
#content {
background-color: lightblue;
clear: both;
}
<div id="box">
<div id="header">
<p>Header</p>
</div>
<div id="content">Content</div>
</div>
https://jsfiddle.net/datvLg9r/1/
<p></p> Tag have margin so you have to set margin:0 for p element.
This targets the p element within the div with id header only and removes the margin.
#header p {
margin: 0;
}
see demo https://jsfiddle.net/datvLg9r/1/
update HTML as follow - remove p element it will work.
<div id="box">
<div id="header">Header
</div>
<div id="content">Content</div>
</div>
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/
I have code like this:
<div class="more-options clearfix">
<div class="boxes">
<img alt="#" src="images/icons/onl-marketing.png">
<p>Online Marketing News</p>
</div>
<!-- end .boxes -->
<div class="boxes">
<img alt="#" src="images/icons/str-success.png">
<p>Stories Success</p>
</div>
<!-- end .boxes -->
I want to vertical align p tags middle in div, images float left and div.box:last-child has margin-left: 1%; I try this css but it doesn't work:
div.more-options {
margin: 15px 0;
div:first-child {
.fleft;
}
div:last-child {
margin-left: 1%;
}
div.boxes {
padding: 20px;
width: 49.5%;
background: #ecf0f1;
min-height: 25px;
display: table-cell;
vertical-align: middle;
img {
.fleft;
margin-right: 25px;
.img-responsive;
max-width: 25%!important;
}
p {
.fontfc(26px, #666666);
}
}
/* end div.boxes */
}
/* end div.more-options */
How can I vertical align text and keep margin 1% div.boxes:last-child?
here you have some fixes:
p and img with display:inline
it's working the vertical-align:middle;
making the parent display: table
EDIT: you are using padding and width: you will need an extra div for this, and with tables you need an extra cell for "separation", check this out:
updated link with images vertical aligned too:
the fiddle
html:
<div class="more-options clearfix">
<div class="boxes">
<div class="in">
<img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png">
<p>Online Marketing News</p>
</div>
</div>
<!-- end .boxes -->
<div class="separation"></div>
<div class="boxes">
<div class="in">
<img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png">
<p>Stories Success</p>
</div>
</div>
<!-- end .boxes -->
css:
div.more-options {
margin: 15px 0;
div:first-child {
}
div.separation {
width: 1%;
display: table-cell;
}
div.in{
padding:20px;
}
div.boxes {
width: 49.5%;
background: #ecf0f1;
min-height: 25px;
display: table-cell;
vertical-align: middle;
img {
display: inline-block;
margin-right: 25px;
.img-responsive;
max-width: 25%!important;
vertical-align: middle;
}
p {
.fontfc(26px, #666666);
display: inline-block;
}
}
/* end div.boxes */
}
/* end div.more-options */
the result screenshot:
p elements are paragraphs - so they have a default property of display:block. Either use another element, for example a span.
Alternatively you can change the display property of the p dom element, for example to display:inline.
Update - the property of vertical align 'vertical-align:middle' should be applied to the images.
Also - your nesting of styles seems wrong, see a working example below.
Example (updated):
http://jsfiddle.net/YwV54/2/
Your Structure is ok.
In order to use vertical-align:middle you need to use table structure:
#wrapper div#main-content div.more-options div.boxes{display:table;}
#wrapper div#main-content div.more-options div.boxes p{verticle-align:middle;}
#wrapper div#main-content div.more-options div.boxes img{max-width:25% !important; remove this}
Set padding margin according to content.
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 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;
}
I have a basic two column CSS layout, the CSS looks like
#sidebar {
width:100px;
}
#main {
margin-left:100px;
}
And some sample html
<div id="content">
<div id="sidebar">some sidebar content</div>
<div id="main">some main content</div>
</div>
This works, but it seems repetitive and error prone that the sidebar width needs to match the main's margin-left value. Is there a better way to do this?
You can use the float property on #sidebar:
#sidebar {
width:100px;
float: left;
}
JS Fiddle Example
However, using the above method, if the content of #main causes its height to extend below #sidebar, it will wrap under the sidebar. To avoid this, use the display:table-cell property:
#sidebar, #main {
display: table-cell;
}
JS Fiddle Example
CSS
#sidebar { width:100px; float: left; }
#main { float: right; }
HTML
<div id="content">
<div id="sidebar">my stuff</div>
<div id="main">some main content</div>
<div style="clear:both;"></div>
</div>
I recommend 960.gs or BlueprintCSS for basic-html/css styling.
You may nest sidebar inside main giving main a padding left and sidebar a -ve margin.
#content{
width: 100%;
}
#sidebar, #main{
float: left;
display: block;
}
#sidebar{
width: 100px;
background-color: orange;
margin-left: -100px;
}
#main{
padding-left: 100px;
background-color: green;
width: 100%;
}
<div id="content">
<div id="main">
<div id="sidebar">some sidebar content</div>some main content
</div>
</div>
Here is the working demo.