Since last week I am again trying to make a website after an absence of about 2 years. It went pretty well until I noticed that when I minimize the browser, the content does not stay in the wrapper.
I have been looking for solutions on this website and on google but I cant seem to find the right one. Most solutions mention problems with #float and overflow but I do not use float (hope that this is not the problem) and I have been playing with the overflow but I cant get it to work.
Below you can find the CSS and HTML code I used.
The HTML:
<div id="wrapper">
<div id="content">
<div id="header">
<div id="logo">
<img src="style/images/logo.gif" width="184" height="73" alt="logo" />
</div>
<div id="menu">
<ul id="navlist">
<li id="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<div id="main">
Title
subtitle
</div>
<div id="footer">
<div id="left_banner">
</div>
<div id="right_banner">
</div>
</div>
</div>
</div>
and the CSS
html, body, ul, li {
margin:0px;
padding:0px;
height:100%;
}
#wrapper {
text-align: center;
background:url(images/bg.gif);
background-repeat:repeat;
height:100%;
width: 100%;
overflow:auto;
}
#content {
background-color: #fff;
margin: 0px auto;
width: 780px;
height: 100%;
border-left:#fd5d78 4px solid;
border-right:#fd5d78 4px solid;
}
#header {
position:relative;
height:120px;
}
#logo {
position:absolute;
right:43px;
top:37px;
}
#menu {
position:absolute;
bottom:0px;
left:58px;
}
#main {
position:relative;
left:25px;
top:35px;
width:730px;
height:320px;
}
#footer {
position:relative;
width:730px;
left:25px;
top:70px;
background-color:#0F0;
clear:both;
}
#left_banner {
position:absolute;
left:0px;
width:349px;
height:134px;
border:#fd5d78 2px solid;
background-color:#FFF;
}
#right_banner {
position:absolute;
right:0px;
width:349px;
height:134px;
border:#fd5d78 2px solid;
background-color:#FFF;
}
Thanks a mil for your help.
Try adding display:block; to the #wrapper
jsfiddle
I know you said you don't use floats, but here is a solution using them. One of the biggest problems you had was you were setting the two footer banners to absolute positions, which throws off the 100% height on the parent div. With floats and overflow:hidden you are able to bring those divs back into the 100% calculation.
I had to make many changes to your css, so take what I have in the jsfiddle as your starting point.
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
Please I have an image as a link to another page and I have a menu of 2 text options (using ul&li) When I use only my image, it works, but when I try to put everything together, my image doesn't link, only the menu works. My code run in Chrome and Explorer, I can't see where the problem is. Someone please help me.
Thanks!
Here my html code:
<body>
<div id="container">
<div id="header">
<div id="home">
<img id="flores" src="images/flores.jpg" alt="home" />
</div>
<div id="connexion">
<section id="formulario">
<p id="titulo">Mi cuenta</p>
<form action="" method="get">
...
</form>
</section>
</div>
<div id="contenido">
<div id="contenido_menu">
<ul>
<li>Rosa</li>
<li>Jasmin </li>
</ul>
</div>
</div>
</div>
</div>
</body>
My css code:
#container{
position: relative;
margin:auto;
margin-top:150px;
width:1024px;
height:768px;
background-color: grey;
}
#header{
margin:auto;
margin-top:0px;
width:1024px;
height: 150px;
}
#home{
position:absolute;
width:624px;
height:150px;
}
#flores {
margin-top:0px;
width:100%;
height:100%;
}
#contenido{
position:absolute;
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
position: absolute;
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
#contenido_menu ul{
margin: 0 auto;
}
#contenido_menu li{
display:inline;
padding-top: 50%;
padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
font-family: Arial;
font-size:19px;
font-weight:bold;
color:#1a53ff;
height:40px;
padding:30px 50px;
text-decoration:none;
}
Only thing I can imagin is that some div or the menu is over the picture. Try to check it with an tag inspector from your debugging tools.
Check your code properly.
In the html you have given the location of flores.jpg as "images/flores.jpg".
While for the other image rosas.jpg, in your css you typed the location as "img/rosas.jpg".
Check whether both images are in their respective folders, or you might have typed one of them wrong.
The problem comes from the below declaration. Remove padding-top:50%. I hope by mistake you put % instead px.
#contenido_menu li{
display:inline;
padding-top: 50px;
padding-bottom: 5px;
}
Also remove position:absolute from #home class.
#home{
/*position:absolute;*/
width:624px;
height:150px;
}
DEMO
You positioned the home and the menu div absolute, if I remove absolute it works fine:
http://jsfiddle.net/2m8rmvuh/
Edit: Linked to an old fiddle, now its the correct one ;)
#home{
width:624px;
height:150px;
}
#contenido{
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
I dont know if thats the look you want, but if you give them the attribute absolute, they are overlapping, if you use a large picture.
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}