Help! anyone knows how to fix this issue in div layout?
i am trying to make a div layout which is not will going to overflow when the web browser is zoom in or out,
here is my example, when i zoom in the webbrowser it come's to..,
the "header right" going down at the left side of the "header left", what i want is the div "header left","header center","header right" is continue zoom in and there is scrorable in bottom so the content inside the div will not have an overflow, something like this...,
here is my code;
**HTML**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Help Div Fix</title>
<link type="text/stylesheet" href="css_layout.css">
</head>
<body>
<div id="header_div">
<div id="header_left">Header Left</div>
<div id="header_center">Header center</div>
<div id="header_right">Header Right</div>
</div>
</body>
</html>
**CSS**
body{
margin:0;
background:#EEF4F9;
}
#header_div{
width:100%;
float:left;
}
#header_left{
float:left;
height:50px;
width:330px;
background:#00F;
}
#header_center{
float:left;
height:50px;
width:330px;
background:#999;
}
#header_right{
float:left;
height:50px;
width:330px;
background:#666;
}
Add Minimum width for your parent header class.
#header_div{
width:100%;
float:left;
min-width:990px;
}
JSFIDDLE DEMO
Set the left, center, right divs to width: 33%; and min-height: 50px;.
Related
I am making a website and at one part I made a flexbox row of 3 boxes, and whenever I put anything in any of the boxes their size expands and pushes away everything else. How do I make it not change it's size regardless of what I put in it? Here is the code:
/*---------CENTER----------*/
div.center-grid {
display:flex;
justify-content:center;
}
#grid1 {
background-color:red;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#grid2 {
background-color:green;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
position:static;
max-width:0px;
max-height:0px;
}
#grid3 {
background-color:blue;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#ingrid1 {
display:grid;
}
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center-grid">
<div id="grid1">
grid1
</div>
<div id="grid2">
<div id="ingrid1">
<image src="content/images/q1.png"></image>
<image src="content/images/q2.png"></image>
</div>
</div>
<div id="grid3">
grid3
</div>
</div>
</body>
</html>
Try using max-width in css. Max-width specifies the maximum width of the specified element.
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
I have a problem that I can't solve. I want my main div to expand vertically when its child div is filled with content, but couldn't make it. When I add lorem text to the left div, it expands if the text contains more than its original width, but the main div isn't expanding. How can I solve that problem?
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
CSS
#main{
background-color:#ff8f79;
width:900px;
min-height:400px;
margin:0 auto;
position:relative;
}
#left{
position:relative;
width:300px;
min-height:300px;
float:left;
background-color:blue;
}
#middle{
width:300px;
height:300px;
float:left;
background-color:green;
}
#right{
width:300px;
height:300px;
float:left;
background-color:black;
}
add this to css
#left, #middle, #right {
word-wrap: break-word;
}
keeps all the text within each individual box and they expand and also expand the main
I have two fixed-width divs, first one 'main box' and the other 'other box'
I want them center-screen
and,
when browser-width permits, next to one another.
I achieve the latter by making them float:left but then since they're "out of the flow" I can't make them center screen (by margin: auto on outer div)?
Is it possible some other way?
Please see demo:
http://jsbin.com/jitus/1
When you set .a and .b to inline-block elements, you can set their parent to text-align center. Then this is your requirement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc{text-align:center;}
.a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
.a{background:blue;}
.b{background:red;}
</style>
</head>
<body>
<div class="tc">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
If I understood the question right HERE you can find a fiddle
#cont{
margin: 0 auto;
max-width:600px;
}
#a{
width:300px;
height: 300px;
background:red;
float:left;
}
#b{
width:300px;
height: 300px;
background:lime;
float:left;
}
HTML:
<div id="cont">
<div id="a"></div>
<div id="b"></div>
</div>
We have a iamge banner on our web page that is a gradient that is repeated on the x-axis. The problem is, if our content on our web page (which is dynamically created based on data in our database) spans a width greater than the window width, then our banner no longer spans the entire width of the document when scrolled. Anyone know how to fix this?
A simple example is posted below. The blue is our "banner" the "red" is our content.
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:1500px;
background-color:red;
}
</style>
</head>
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</html>
Try putting the header inside the content div. Like this:
...
</head>
<div id="content">
<div id="header"></div>
<h1>TEST</h1>
</div>
</html>
Even better, add a wrapper:
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#wrapper {
width:1500px;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:100%;
background-color:red;
}
</style>
</head>
<div id="wrapper">
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</div>
</html>
Setting a min-width on your #header that equals the #content width would do it:
#header{
height:80px;
background-color:blue;
width:100%;
min-width: 1500px;
}
put a
<div id="wrapper"> header & content </div>
around everything... make wrapper position:relative, so 100% header is the width of the wrapper, which will be whatever content is.