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%;
}
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.
My code:
#Parent {
border-radius: 8px;
background-color:#cccdce;
width:70%;
height:500px;
float:left;
}
#child {
padding:15px;
border-radius: 8px;
background-color:blue;
width:100%;
height:20px;
float:left;
}
<div id="Parent">
<div id="child">
<div>aaaa</div>
</div>
</div>
What I now have is:
I want to know why padding is not working? Isn't padding is supposed to set the space between parent and child element? Why it is not working and overlapping?
I want to do this:
use flexbox and remove floats, and FYI your padding needed to be set in parent not child
#Parent {
border-radius: 8px;
background-color: #cccdce;
width: 70%;
height: 500px;
display:flex;
padding: 15px;
}
#child {
padding: inherit;
border-radius: 16px;
background-color: blue;
height: 20px;
flex:1
}
<div id="Parent">
<div id="child">
aaaa
</div>
</div>
Check this out.
#Parent {
border-radius: 8px;
background-color: black;
width: 70%;
height: 500px;
padding: 15px;
}
#child {
border-radius: 8px;
background-color: white;
padding: 15px;
height: 470px;
}
#grand {
border-radius: 8px;
background-color: blue;
width: 100%;
height: 20px;
}
<div id="Parent">
<div id="child">
<div id="grand">aaaa</div>
</div>
</div>
It would help if you give padding to the right element. Right now you are assigning 15px padding to the child. That's the reason why there is 15px space between the text and the child. If you add a padding to the parent-id, you create "space between parent and child element":
#Parent {
padding: 15px;
}
You can move your padding to the parent and remove the floats. This will give you the expected result.
I want to put three images at the center of a page. In the following code, when I use float, the image jumps out of the parent div with class "centered". Is there any way that I can keep the child div inside the parent div?
HTML:
<div class="centered">
<div id="M">
<img src="images/M.png">
<img src="images/M.png">
<img src="images/M.png">
</div>
</div>
CSS:
.centered {
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
width: 1500px;
}
.centered img {
display: block;
}
#M {
float:left;
}
you have to add sudo element just after your .centered div to clear the float after it.
.centered:after{
content: "";
display:table;
clear:both;
}
If you want to center the image, give it a width and a left and right margin of auto:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
<img />
If you want to center the image inside a 1500px wide div.centered with a 3px green border, do the same:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
.centered {
margin: 0 auto;
border: 3px solid #73AD21;
width: 1500px;
}
<div class="centered">
<img />
</div>
I have a div that is at the bottom of my page. It's CSS is:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
background-color: black;
}
And I have the div's content like on the image:
content html:
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
How do I make for my div's content show up something like this:
I can't use line breaks or tables, because the div's position is fixed, and now I don't know what to do...
Something like this JSFiddle should work.
What we do is apply the background-color to the children of the container div. Then we give them some padding, which creates the space between them. Voila!
HTML:
<div id="news-bottom">
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
CSS:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
}
#news-bottom span span,
#news-bottom span img {
background-color: black;
padding: 5px;
}
If you want fixed position, you can make several divs and change their left property to what you like. You can use % positioning so they look almost the same on different resolutions.
But, I'd recommend using float in a fixed container <div>, and combine with #jmeas suggestion of margins. Something like this:
HTML
<div class='container'>
<div class='arrow'></div>
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='arrow'></div>
</div>
CSS
#container {
...fixed...
}
.arrow {
float:left;
width:10%;
}
.item {
float:left;
margin-left:5px;
width:20%;
}
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.