This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I have 2 files: 1 is .html file and another file is .css file
and here are their content:
#left,
#right {
display: inline-block;
}
#left {
width: 15%;
height: 550px;
margin-bottom: 100px;
margin-left: 10px;
border: 1px solid black;
}
#right {
width: 80%;
margin-left: 25px;
}
#header {
width: 100%;
height: 100px;
border: 1px solid black;
}
#content {
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 10px;
}
#footer {
width: 100%;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
#menu {
width: 100%;
height: 50%;
background-color: red;
}
<div id="left">
</div>
<div id="right">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
If I add 1 <h1> element inside #left or #header, #footer, #content then their position move down.
I don't know why it happens. Please help.
The browser is adding default margin and padding to the h1 element (likely on the top) that is affecting the parent element. Go to the browser and click on inspect element. This will show you the default value. You can then specify the values in your code according to your need.
Related
This question already has answers here:
Align 2 DIV per line, both the with the same height
(4 answers)
Closed 4 years ago.
I am having a few issues getting 3 divs to align in a web page. Basically, I have 3 divs along side each other in a 'main' div. I want to set a minimum height on all 3 of the child divs, but have them expand to match the height of the largest of the 3. The crude image below shows the issue.
EDIT - To clarify, I am trying to get the 'Blue' and 'Red' sections (sideMenu, rightMenu and contentDiv) to expand automatically to reach the footer. As it stands now, the central div expands and leaves white space beneath the left and right 'Blue' sections.
My html looks like this -
<div class="mainDiv">
<div class="sideMenu">
<div class="vertical-menu">
<a id="uxLink_1" runat="server" href="1.aspx">1</a>
</div>
</div>
<div class="rightMenu" id="uxRightMenu">
<img alt="" src="" border="0" id="uxRightImage" runat="server"></img>
</div>
<div class="contentDiv">
<asp:ContentPlaceHolder ID="uxContentPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footerBanner" id="uxFootBanner">
<center>
<img alt="" src="" border="0" id="uxFooterImage" runat="server" class="footerBannerImage"></img>
</center>
</div>
The CSS is as follows -
.mainDiv {
width: 98%;
min-width: 440px;
border: solid 5px black;
margin-top: -4px;
border-top: none;
overflow: auto;}
.contentDiv {
min-height: 700px;
height: auto;
font-size: 9.5pt;}
.sideMenu {
height: 100%;
min-height: 700px;
width: 150px;
float:left;
background-color: black;
border-right: solid 5px black;}
.rightMenu {
height: 100%;
min-height: 700px;
width: 115px;
float: right;
background-color: black;
border-right: solid 5px black;
padding-left: 5px;}
.footerBanner {
display: none;
width: 98%;
float:none;
background-color: black;
border: solid 5px black;
border-top: none;
min-width: 440px;
padding-top: 3px;}
.footerBannerImage {
width: 98%;
height: auto;
min-width: 440px;
max-width: 728px;
max-height: 90px;
min-height: 54px;}
.vertical-menu {
width: 150px;}
.vertical-menu a {
background-color: black;
color: white;
display: block;
padding: 12px;
text-decoration: none;}
.vertical-menu a:hover {
background-color: #37353d; }
.vertical-menu a.active {
background-color: #438210;
color: white;}
You should use % instead of px units for your child div tags.
It means if you add width: 50%; its width will be half of its parent element width.
So if you want to create something like that picture you should give width: 30%; to your side elements and width: 40%; to you bigger (center) element.
That should work fine. Also, delete every min-width & max-width property that you add to your child elements.
You can achive it with flexbox as well.
I've focussed in the layout only and I've ommited some of your markup:
.container {
display:flex;
flex-direction:column;
height:200px;
}
.container a{
color:#fff;
}
.mainDiv {
display:flex;
flex-grow:1;
justify-content:space-between;
}
.contentDiv {
flex-grow:1;
background:#f00;
}
.sideMenu {
display:flex;
flex-direction:column;
flex-basis:15%;
align-itens:start;
background-color: #00f;
}
.footerBanner {
background-color: #000;
height:20%;
}
<div class="container">
<div class="mainDiv">
<div class="sideMenu">
1
</div>
<div class="contentDiv">
</div>
<div class="sideMenu">
2</img>
</div>
</div>
<div class="footerBanner">
3
</div>
</div>
This is a helper tool for creating flexbox layouts quickly.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 6 years ago.
Don't mind the commented out lines. I'm experimenting with the box model, but can't seem to figure out why I can't use margin-top to drop the yellow box a bit down? I can use margin-left to get it to move to the right, so that seem weird to me... Thanks.
I'd like to understand why this happens :)
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.
See demo below:
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
margin-left: 10px;
border: 1px solid; /*ADDED THIS*/
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
Use display:inline-block; in box1
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
display:inline-block;
}
<div class="largebox">
<div class="box1"></div>
</div>
You can try using position:absolute; in .box1 like this:
.box1{
position:absolute;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
when I use display = inline-block to my div, there is a gap between these 2 boxes. can anyone tell me why it is like this, and how can I remove the gap?
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div>
<div class="second"></div>
Use float: left;
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block; float:left
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;float:left
}
set font-size: 0 for parent element.
.parent-element { /* apply to the parent element */
font-size: 0;
}
.first, .second {
font-size: 13px; /* default value, change as per your need */
}
Change your html like blow
other way add Comment like blow
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div><div class="second"></div>
<div class="first"></div><!--
--><div class="second"></div>
#Chao Wang for removing that gap you have to use left float in bot the
div
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
</style>
<div class="first"></div>
<div class="second"></div>
It will resolve your problem (y)
The "inline-block" elements has this space because of font size of the parent.
Here you can find more details and ways how to remove the space. One of the easiest is this to add a div parent with font-size=0:
<div style="font-size: 0;">
<div class="first"></div>
<div class="second"></div>
</div>
This happen beacause it use line height
.inline-parent{
display:inline-block;
width:100%;
line-height:0;
font-size:0;
}
.inline1{
display:inline-block;
width:50%;
background:#333;
line-height:1;
font-size:15px;
}
.inline2{
display:inline-block;
width:50%;
background:#999;
line-height:1;
font-size:15px;
}
<div class="inline-parent">
<div class="inline1">
text text
</div>
<div class="inline2">
text text
</div>
</div>
It is all because of line-height and font-size
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
I'm trying to put a logo and a sidebar next to eachother, but it just won't work. The logo container needs to be centered at the top. And the sidebar needs the be at the top-left Can you help me? I already tried float, no succes. :(
code:
<body>
<center>
<div id="logo1">
<div id="logo2"></div>
</div>
</center>
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
</body>
CSS:
#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: -10px;
margin-left: -15px;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
Ok, This is what you have to do :
You need to remove the display:inline-block from #logo1
And instead of just writing margin-top:10px , you need to use margin:0px auto, or you could write margin:10px auto. By this, it will center your #logo1 div.
But to center a "div" , you need to have another container(div) that wrap within your div. So that it will know, from which side to which side that it will have to be "centered".
For that reason, you will need to create another div or container around your #logo1 div, and lets assume it is called "right" (see the code below).
And for this div/container to be just beside your sidebar, it will need to have a relative position same as your sidebar. Now, you can just float both of your #sidebar1 and also your #logo1 to the left.
Thus, you dont have to use that negative margin for your sidebar anymore (remove that). If you wanted to use the negative margin, you have to use the absolute position in this case. But you will then have to restructure your whole #logo1 div which will create a lot of works.
This is the full code for your reference :
HTML code :
<div id="container">
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1">This is sidebar</div>
</a>
</div>
<div id="right">
<div id="logo1">
<div id="logo2"><This is logo</div>
</div>
</div>
</div>
And use this CSS :
#container{
width:1000px;
height:1080px;
position:absolute;
border:1px solid #000;
}
#test1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position:relative;
float:left;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
border:1px solid red;
}
#right{
position:relative;
float:left;
margin-top:0px;
width:870px;
height:100px;
}
#logo1 {
position:relative;
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 700px;
}
Do you want this ?
#test1 {
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
background-image:url('Afbeeldingen/1.png');
}
#sidebar1 {
position:absolute;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
<div id="logo1">
<div id="logo2"></div>
</div>
I assume this is what you want? http://jsfiddle.net/Le6PH/
You should do:
Remove the negative margins (If you don't know what you are doing, don't use negative margins)
Remove the <center> tag (This tag is deprecated since EVER)
Remove the margin of your logo
Add a wrapper div around your whole structure
Add the following CSS to that div
CSS
.wrapper{
position:relative;
width:818px; /* sidebar width + logo width */
}
Change position:relative; to position:absolute for your logo & sidebar divs.
Add top:0; for both divs
Add right:0; for the sidebar div
EDIT:
With a centered logo, like this (http://jsfiddle.net/Le6PH/1/) you'll need to change 2 things:
Add a margin-left:118px; to the logo div
Change the width of the wrapper to width of logo + margin logo + width of sidebar.
Try floating your div, it should look like this..
<div class="row">
<div id="log"></div>
</div>
<div class="row">
<div id="sidebar"></div>
</div>
css
.row{
float: left;
width: 50%;
}