I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it
Related
I have an div container namend "content". This container got a width of 500px;.
Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?
And when I resize the window it should look like this:
Here is the code:
*{
margin: 0px;
padding: 0px;
}
.content{
width: 500px;
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right{
float: right;
width: 50%;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
JFiddle
You should Change Left Width size To 60%
.left{float: left;width: 60%;height: 20px;background-color: blue;}
.right{float: right; width: 40%;height: 20px; background-color: red;}
I think, this will be the best answer for you. please check the given below code snippet.
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
height: 100px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
You want something like this ? You have to resize the window to see the change.
I use calc() function in CSS :
.right{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-left: 10px;
background-color: red;
}
I also use a fluid width for the main container.
See this fiddle
http://jsfiddle.net/7XD8s/300/
.left {
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right {
display: block;
margin-left: 300px;
height: 20px;
background-color: red;
}
No need of calc
http://jsfiddle.net/7XD8s/303/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
overflow: hidden;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
width: 500px;
padding: 5px;
}
.left{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
float: right;
margin: 0px;
width: 300px;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.
http://jsfiddle.net/qvu712tj/
#blog-wrapper {
background-color: blue;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
align: center;
}
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px;
float: left;
padding: 5px;
}
<div id="blog-wrapper">
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
</div>
I hope this makes sense please could anyone help?
Try this:
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px 2.5%;
float: left;
/* padding: 5px; */
}
use percentage instead of px for margin and padding
.blog-section{
background-color: green;
height: 200px;
width: 45%;
margin: 1%;
float: left;
padding: 1.5%;
}
Try this
.blog-section{
background-color: green;
height: 200px;
width: 48%;
margin: 12px 1%;
float: left;
}
I have been working on a website the last couple of days, and today I just ran into a problem when I wanted to move the navigation bar down from the top of the page. This have never been a problem for me, but I have read my code so many times by now, that I'm not able to find the mistake.
What I did was to add a margin-top: 50px; to my navigation div, but it then proceeds to create a white border above the parent div.
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
Languages
Contact
</div>
... other content
</div>
The image below should show the issue.
http://i.stack.imgur.com/8e1mW.png
If anyone has an idea about what to do, I would love to hear from you.
Thank you :)
Change margin-top: 50px; to padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
Now define your #section1 id css overflow:hidden;
#section1 {
overflow: hidden;
}
Demo Fiddle
What color do you want the 'white' space you could create a div on top
<div style="background-color:#black;width:100%;height:50px"><div>
How do I make those columns to be same width? Not the fix way. I want to do it automatically. It means when one will contain more text it will be longer so the second one will be equally long.
CSS
article.leftnews {
float: left;
border-radius: 30px;
width: 43%;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
overflow: auto;
border:5px solid #0000CC;
}
article.rightnews {
border-radius: 30px;
margin-left: 52%;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
overflow: auto;
border:5px solid #000066;
}
section{
position:relative;
margin-left:auto;
margin-right:auto;
width: 700px;
text-align: justify;
}
My demo here
The best way to me is using CSS table and table-cell
http://jsfiddle.net/2d9917o7/
Update: for rounded corners style, additional <div> inside each table cell is needed.
http://jsfiddle.net/2d9917o7/1/
HTML
<div class="container">
<article class="leftnews">left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end</article>
<article class="rightnews">right</article>
</div>
CSS
.container {
display: table;
width: 100%;
}
.leftnews,
.rightnews {
display: table-cell;
width: 50%;
background: pink;
}
.leftnews {
background: lime;
}
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas