I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
Related
There are some questions around this topic but most of them are a few years old.
I am just wondering if there's a way to layout your page, such that the scrollwheel will scroll a specific div regardless of where the mousewheel is.
For example, on stackoverflow if you scroll down the homepage you will see the left hand menu stays fixed, and you can scroll it while the mouse is hovering over the menu, even when the mouse is hovering over the title bar. It may however be using javascript, I don't know.
Before I delve into the javascript solutions I wondered if CSS has enabled this, perhaps with a default div or some other CSS technique.
Here's a fiddle of my layout: https://jsfiddle.net/thjyf5c3/
<body style="display: flex; flex-direction: column; height:100vh; overflow-y: hidden">
HEADER FOR THE PAGE
<div style="flex-flow: column; display:flex;flex:1">
<div style="flex: 1; display:flex;">
<div style="background-color: red; max-width: 200px; min-width: 100px; flex-basis: 20%">test</div>
<div style="background-color: purple;flex: 1; display: flex">
<div style="flex-grow:1; position: relative; overflow:hidden; ">
<div style="position:absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll">
<div style="flex: 1; display:flex;">
<span style="font-size:500px">a<br />b<br />c<br /> </span>
</div>
</div>
</div>
</div>
<div style="background-color: blue;flex: 1">test</div>
</div>
</div>
As you can see it does not scroll if the mouse isn't in the bounds of the grid.
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
why is my content showing outside the div?
I have a problem where the background style for a div doesn't cover everything nested inside the div.
Here is a jsfiddle to show you exactly what I'm talking about
How can I make the grey background style from the div ddg-corner-statements apply to everything inside the div without setting an absolute height?
This is a common issue when working with floats. There are a couple of common solutions:
Add a div after the floats with clear: both. Example.
<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
Add the two floats into a container with the CSS attribute overflow: auto. Example.
<div style="overflow: auto">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Make the parent element a float. Example.
<div style="float: left">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Use the :after CSS pseudo element. Example.
.parentelement:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Adding a set height to the parent element. Example.
<div style="height: 200px">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Personally, I use option 2 for simplicity and semantics' sake
See an updated version of your code here.
I guess you want to apply grey background color to everything : My Fiddle
Clear your floats like this :
<div style="clear: both;"></div>
<div id="view-all-statements">View All Statements →</div>
The grey background seem to be an image. Try repeating it vertically and see what happens.
This will solve yout problem:
> .ddg-corner-statements {
> padding: 10px 15px 1px;
> background: url("../images/bg_story_resources_bot.gif") repeat-x scroll left bottom transparent;
> display: inline-block; }
The background isn't being applied because your child elements are floated and taken out of the flow.
.ddg-corner-sidebar ul li a {
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #F8F8F8;
color: #333333;
display: block;
float: left;
padding: 5px 0 9px;
width: 100%;
}
If you remove float:left; the background will perform as expected.
If the float:left is required you will need to clear your floats.
The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="600" height="600" style="background:lightgray;">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
Floats are okay, but problematic with IE 6 & 7.
I'd prefer using the following on the inner div:
margin-left: auto;
margin-right: 0;
See the IE Double Margin Bug for clarification on why.
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
Old answers. An update: use flexbox, pretty much works in all browsers now.
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
And you can get even fancier, simply:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
And fancier:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
You can use flexbox with flex-grow to push the last element to the right.
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
Note that while this answer is not wrong, it is very outdated methodology written in 2015
Other answers for this question are not so good since float:right can go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0 for me didn't work in complex nested divs (I didn't investigate why).
I've figured out that for certain elements text-align: right works, assuming this works when the element and parent are both inline or inline-block.
Note: the text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
An example:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
Here's a JS Fiddle.
If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right; on the parent div.
Do you mean like this? http://jsfiddle.net/6PyrK/1
You can add the attributes of float:right and clear:both; to the form and button
Maybe just:
margin: auto 0 auto auto;
Simple answer is here:
<div style="text-align: right;">
anything:
<select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
</select>
</div>
Sometimes float: left leads to design problems, for that cases you can use display flex like this:
.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
}
<div>
<div class="right">Right</div>
</div>
If you are using bootstrap, then:
<div class="pull-right"></div>
One way could be setting a parent div for those elements that need to be pulled right and do the rest like the way shown in the the example below to have them right-aligned:
.parent-div {
display: flex;
float: right;
}
/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/
.child-div {
text-align: center;
background-color: powderblue;
margin: auto 10px;
height: 100px;
width: 50px;
}
<div class="">CANVAS div </div>
<div class="parent-div">
<div class="child-div">child 1</div>
<div class="child-div">child 2</div>
<div class="child-div">...</div>
<div class="child-div">child n</div>
</div>
If you don't have to support IE9 and below you can use flexbox to solve this: codepen
There's also a few bugs with IE10 and 11 (flexbox support), but they are not present in this example
You can vertically align the <button> and the <form> by wrapping them in a container with flex-direction: column. The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them.
You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row. Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them.
Also, this would require that you remove all position and float style rules from the code linked in the question.
Here's a trimmed down version of the HTML in the codepen linked above.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
And here is the relevant CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
display: flex;
justify-content: space-between;
hasnt been mentioned. if there are 2 elements (even if one is an empty div) it will place one on the left and one on the right.
<div style="display: flex; justify-content: space-between;">
<div id="emptyDiv"></div>
<div>I'm on the right</div>
</div>
You can simply use padding-left:60% (for ex) to align your content to right and simultaneously wrap the content in responsive container (I required navbar in my case)
to ensure it works in all examples.
You can do it easy by just add this css:
(Works in IE11)
<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>
I know this is an old post but couldn't you just use <div id=xyz align="right"> for right.
You can just replace right with left, center and justify.
Worked on my site:)
I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
This renders fine in Firefox and Chrome:
http://www.boplicity.nl/images/firefox.jpg
However IE7 totally messes up and puts the right floated element to the right of the page:
http://www.boplicity.nl/images/ie7.jpg
Can this be fixed?
Specify width in outermost div.
If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:
<div style="float:left; width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.
So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.
<div style="float:left; min-width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
I fixed it using jQuery to emulate the behaviour of the non-IE browsers:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
Try putting position:relative; to parent-element and to the child-element. It solved the problem for me.
Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: right; background-color:green;">title</div>
<div style="float: left; background-color:yellow;">toolbar</div>
</div>
Make this <div style="background-color:blue; padding: 1px; height: 20px;> the parent of the 2 floating divs also clear:all