I tried to add magin-top to a div style .. but it's not working
Here is the code
.side {
margin-left: 65%;
margin-top: 3%;
margin-right: 3%;
border: 1px solid;
}
.home {
margin-left: 3%;
margin-top: 3%;
width: 62%;
border: 1px solid;
float: left;
}
.home h1 {
margin-top: 0;
}
.side h1 {
margin-top: 0;
}
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
I expect the "side" div to be at the same line with "home" div
When you assign float:left to an element,the element shifts to that direction and the other elements gets wrapped around it.If you inspect the page, you can see that .side covers the total width of the page and .home is sitting just over it.To make .side align with .home,minimise both the width of .home and the left margin of .side so that both of the div can be accomodated with the width of the page.Next apply float:left to .side, so that it can get aligned with .home . Here's a working solution:-
<html>
<head>
<style>
.home {
margin-left: 3%;
margin-top: 3%;
width: 50%;
border: 1px solid;
float: left;
}
.side {
margin-left:5%;
margin-top: 3%;
margin-right: 3%;
float:left;
border: 1px solid;
}
</style>
</head>
<body>
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
</body>
</html>
Here is a link of a video that will give you a clear understanding about floats: https://www.youtube.com/watch?v=xara4Z1b18I
is this what you want? check here. if so, remove margin-top from .home
i need it to be like this .. http://imgur.com/tIUgEc1
when i remove margin-top and add padding-top i get this .. http://imgur.com/ThaHHUu
Use:
* {
box-sizing: border-box;
}
.home {
margin-top: 0;
//more code....
}
The problem is that you are using percentages for your margin-top properties (what exactly is 3% a percentage of?). You should instead consider using absolute pixel values, or wrap your two columns in another container for which would have a single unified margin-top.
On a side note (pardon the pun) your side element should also float: right if you wish it to carry out the same behaviour as home. Removing margin-left and setting a width will make it sit correctly beside the home column.
Koda
Related
First of all, please look at this code.
I learned that this was a common way to realize liquid layout.
But I can not understand some of this code.
.container {
overflow: hidden;
}
main {
float: left;
width: 100%;
margin-right: -340px;
background: red;
}
.main-inner {
margin-right: 340px;
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Question 1
I understand that the negative margin has the effect of moving an element in the specified direction. However, when you run this code, the main element does not seem to be moving at all. Why is this?
Question 2
Since we set the width of the main element to 100%, I understand that the aside element hits the main element and that the main element and aside element can not be side by side.
So, I think that we prepare a horizontal width that can apply the aside element by applying negative margin, but the background color of the main element is applied in the same way as when the horizontal width is 100%. Why is the background color of the main element not (100% - aside width)? How is this series of rendering done?
Question 3
Which document on W3.org describes these actions? I tried looking, but I could not find any detailed information on them.
thank you.
Let's start by adding the properties one by one and see what is happening.
Intially we have this code with no margin applied and only float elements:
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
It's clear that you made the red element to be width:100% floating on the left and the green one to float on the right with a fixed width. You may also notice that p element is having a default margin that's why the blue is not totally covering the red.
Now if you add negative margin-right you will not move the element or decrease the width but you will pull the content from the right in order to overlap the element. Here is a basic illustration:
.box {
width: 200px;
height: 200px;
background: red;
float: left;
}
<div class="box" style="margin-right:-100px;height:220px">
</div>
<div class="box" style="background:blue;">
</div>
As you can see the blue box is overlapping the red one by exactly 100px because we applied -100px to the margin-right of the red box. Same logic will happen in your case, you applied a negative margin equal to the size of the sidebar so you created the need space to move the sidebar at the same level of the main element.
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
So the main element is still 100% width BUT the sidebar is overlapping it due to negative margin.
Now the last step is to add the margin inside the main and in this case it will reduce the width of the inner element to make the total (width + margin) always equal to the width of parent element (containing block)
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
margin-right:340px;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Here is another illustration of margin with block element non floated:
.container {
border: 2px solid;
max-width: 50vw;
margin: auto;
}
.first {
height: 100px;
background: red;
margin: 0 -50px;
}
.second {
height: 100px;
background: blue;
margin: 0 50px;
}
<div class="container">
<div class="first">
</div>
<div class="second">
</div>
</div>
In this case the width is increasing/decrasing due to margin because the logic is always: width + margin = width of containing block.
With elements like float and inline block the logic is the same but we won't have width changes because the width is defined either by the content or explicitly.
.container {
border: 2px solid;
display:inline-block;
}
.first {
float:left;
height: 100px;
background: red;
margin-right:-50px;
}
.second {
display:inline-block;
width:200px;
height: 120px;
background: blue;
margin-top:20px;
margin-right:-100px;
}
<div class="container">
<div class="first">
some text here
</div>
<div class="second">
</div>
</div>
Here the float element has a width defined by the content, the inline-block has a width equal to 200px. The negative margin is creating the overlap and the size of the parent element (the containing block) is equal to width + margins.
For the references:
8 Box model
9 Visual formatting model
10 Visual formatting model details
The above explanation is very simplifed. Refer to the specification links for a full and details explanation.
The odd placement from <main> comes from a browser css-rule
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
You can reset it using a css reset like normalize.css.
However, I recommend using display: flex. Some wonderful resources.
.container {
display: flex;
}
main {
width: 75%;
}
aside {
width: 25%;
}
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom.
Here is the CSS code:
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
Here is the HTML Code:
<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
The problem is your padding, as mentioned above.
Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.
To fix this problem, add this line to the .box's style declarations:
box-sizing: border-box;
You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so make sure to add that to your html.
What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article
* {
box-sizing:border-box;
}
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
I am trying to align a row of divs horizontally within a div fluidly. When the container div contracts the inner divs (which will be actually be images within divs) will push next to each other. I have created a fiddle and the problem I am having is that the inner divs do not move closer when the div is shrunk. I have tried using %'s and numerous other ways to fix this but am new to working with %'s as apposed to px. In my example the container div is fluid but the red inner divs are not! How do i make the inner divs fluid? Here is the
fiddle
And the code:
<html>
<head>
<title>Alignment</title>
<style type="text/css">
.container{position: relative; margin: 0px auto; border: 1px solid black; width: 100%; max-width: 500px;}
li{display: inline-block; margin-left: 25px;}
ul,li{list-style: none;}
.box{width: 100px; height: 100px; border: 1px solid red;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
<div style="clear: both"></div>
</ul>
</div>
<p>When the right side of the container div hits the red box I want the boxes to be pushed left against each other until they
reach the left side of the container div.</p>
</body>
</html>
Try giving width to the elements in %. For eg: try adding the below codes to your stylesheet
li{
display: inline-block;
margin-left: 5%;
width:25%;
}
.box{
width: 100%;
height: 100px;
border: 1px solid red;
}
Try this:
.container{
text-align: center;
}
ul,li{
padding: 0;
}
li{
display: inline-block;
margin-left: 25px;
}
li:first-child{
margin-left: 0;
}
Demo
I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.
Is there any way to make padding increase the contents' distance from the element's edge, as opposed to making the element bigger?
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
float: left;
width: 30%;
background-color: lightgreen;
}
.padded {
padding: 25px; /* Forces box onto next line */
}
<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
<br><br>
<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>
When you use the border-box model, the padding is included in the box size. See here for details.
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
box-sizing: border-box;
padding: 25px;
float: left;
width: 30%;
background-color: lightgreen;
}
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.
For example:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>