Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I am trying to center div tags on a page (content inside is irrelevant). I am able to do it and the page looks great, but it's completely hacked together with arbitrary margins everywhere to get things to align correctly. Can someone point me to a simple .css solution to pull of a page with a structure that looks something like the attached image?
You can use plain CSS without flex or grid layout. Here is an example using Bootstrap:
<div class="container">
<div class="block row"></div>
<div class="clearfix row row2">
<div class="col-sm-6 col"><div class="block"></div></div>
<div class="col-sm-6 col"><div class="block"></div></div>
</div>
<div class="block row"></div>
<div class="clearfix row row4">
<div class="col-sm-4 col"><div class="block"></div></div>
<div class="col-sm-4 col"><div class="block"></div></div>
<div class="col-sm-4 col"><div class="block"></div></div>
</div>
</div>
.block {
background: blue;
height: 30px;
}
.row {
margin-bottom: 20px;
}
.row .col:first-child {
padding-left: 0;
}
.row .col:last-child {
padding-right: 0;
}
.row4 .col {
padding: 0 30px;
}
Here is the jsfiddle.
You can use the percentage width, associated with float property, to do what you want.
Float: https://www.w3schools.com/css/css_float.asp
For example:
HTML:
<div class="header"></div>
<div class="second-container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="third-container">
</div>
<div class="fourth-container">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
CSS:
.header{
width:90%;
height:50px;
margin:5%;
background-color:blue;
}
.second-container{
height:80px;
width:90%;
margin:5%;
}
.second-container .left{
height:100%;
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
background-color:blue;
}
.second-container .right{
height:100%;
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
background-color:blue;
}
.third-container{
height:50px;
width:90%;
background-color:blue;
margin:5%;
}
.fourth-container{
height:70px;
width:90%;
margin:5%;
}
.fourth-container .left{
background-color:blue;
height:100%;
width:29%;
margin-right:2%;
margin-left:2%;
float:left;
}
.fourth-container .middle{
background-color:blue;
height:100%;
width:30%;
margin-right:2%;
margin-left:2%;
float:left;
}
.fourth-container .right{
background-color:blue;
height:100%;
width:29%;
margin-right:2%;
margin-left:2%;
float:left;
}
Of course, you can play with the values of margin if you want to adjust the way you want. Just take care of having 100% in total for a same line if you want it to look nice.
JSFiddle here : https://jsfiddle.net/zg1u2dnu/
Well... There are many ways to get this result. If you want to do it with pure HTML/CSS, Flexbox is probably the most convenient solution:
#wrapper {
width: 85%;
margin: auto;
display: flex;
flex-direction: column;
}
#wrapper > div {
margin: 10px;
}
.blue {
background-color: #4F81BD;
}
#top, #middle-bottom {
height: 100px;
}
#middle-top, #bottom {
height: 180px;
display: flex;
justify-content: space-between;
}
#middle-top > div {
width: 45%;
}
#bottom > div {
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox demo</title>
</head>
<body>
<div id="wrapper">
<div id="top" class="blue"></div>
<div id="middle-top">
<div class="blue"></div>
<div class="blue"></div>
</div>
<div id="middle-bottom" class="blue"></div>
<div id="bottom">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</div>
</body>
</html>
However, like Vanilla JS, this will not work as expected in all web browsers... I recommend you to use front-end frameworks like Bootstrap, Foundation or Semantic UI for optimal results.
Related
I have a dynamically creating chart whose width might keep on increasing. It is placed inside a container with fixed width and auto scroll. So the chart scrolls if it is wider than the container.
My issue is that the width of the chart is not fixed, it depends on the content.
Can I use width:auto to set the chart width as per its need. If not is there any way with just CSS to achieve it.
EDITS:I want the blocks to be in a single line even if the container has to have scroll. Is this possible just using CSS.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
The blocks have to be aligned horizontally. Updating with a image to show the output layout
If you change your .block from float: left to display: inline-block and set white-space: nowrap on your .chart, they will line up horizontal.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
white-space: nowrap;
}
.block{width:100px;background:#ccc;margin:10px;display: inline-block;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can try to use display: table-cell;
only CSS changed :
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;background:#ccc;padding:10px;display: table-cell;}
https://jsfiddle.net/us5Ljz7t/4/
white-space:nowrap will do the trick.
.container {
float: left;
width: 300px;
background: #e3e3e3;
height: 200px;
overflow: auto;
}
.sidebar {
float: left;
width: 100px;
background: #666;
height: 200px;
}
.chart {
/* width:800px;*/
white-space: nowrap; /* ← added */
margin: 50px 20px;
}
<div class="container">
CONTAINER
<div class="chart">
Dynamically adding chart content here
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can take the width: inherit, so that the width will be taken from the parent element, that is the container div.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
width: inherit
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
Here is the fiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am trying to code two inline Divs, one has defined width in px value while the other get the rest width of the container
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
Use CSS table layout as its super-easy to implement and has really good support. It also has the added benefit of balanced column heights - thus making columned layout a doddle to create.
html, body {min-height:100%; height:100%; margin:0;}
.wrapper {display:table; width:100%; height:100%; min-height;100%;}
.wrapper .main {display:table-cell; background:#eee;}
.wrapper .sidebar {display:table-cell; background:#666; width:300px;}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
Didn't really give us much to go on, but I would suggest using display:table-cell; instead of inline-block.
.wrapper {
display:table;
width:100%;
}
.main, .sidebar {
display:table-cell;
border:1px solid black;
}
.sidebar {
width:300px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
using calc without floats:
body,
div {
padding: 0;
border: 0;
font-size: 0
}
.wrapper {
width: 100%;
}
.main {
display: inline-block;
width: calc( 100% - 300px);
background: blue;
height: 50px;
}
.sidebar {
display: inline-block;
width: 300px;
background: red;
height: 50px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
this is kind of fragile , table or flexboxes are better_
flexbox example:
.wrapper {
width: 100%;
display:flex;
}
.main {
flex-basis:300px;
background: blue;
height: 50px;
}
.sidebar {
flex:1;
background: red;
height: 50px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want div "1" to the center and div "2" to the right. what can i do? I have this html
<div class="header">
<div class="1"></div>
<div class="2"></div>
</div>
and this css
.1 {
display:inline-block;
width:200px;
height:120px;}
.2 {
display:inline-block;
width:250px;
height:120px;
float:right;}
First I know it's just sample but don't use number for first character for classes (Which characters are valid in CSS class names/selectors?).
And this is what I usually use to do that
<div id="block">
<div id="right">Right</div>
<div id="middle">Middle</div>
</div>
#middle {
background-color: #494949;
width: 200px;
height: 120px;
margin: 0 auto;
}
#right {
background-color: #949494;
width: 250px;
height: 120px;
float: right;
}
http://jsfiddle.net/index/npq5puc1/.
Try this
1.) Change HTML element according to CSS to get desire result
.div1 {
display:inline-block;
width:200px;
height:120px;
background:red;
float:right;
}
.div2 {
display:inline-block;
width:250px;
height:120px;
float:right;
background:blue;
}
<div class="header">
<div class="div2">div 2 in right</div>
<div class="div1">div 1 in center</div>
</div>
try it like this;
html
<div class="header">
<div class="div1"></div>
<div class="div2"></div>
</div>
css
.div1
{
display:block;
background:#333;
width:200px;
height:120px;
margin:auto;
}
.div2
{
display:block;
background:red;
width:250px;
height:120px;
float:right;
}
Here's the Fiddle link.
Try this
HTML:
<div class="header">
<div class="1"></div>
<div class="2"></div>
</div>
CSS:
[class='1'] {
display:inline-block;
width:200px;
height:120px;}
[class='2'] {
display:inline-block;
width:250px;
height:120px;
float:right;}
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
Well i am developing a site and having trouble in CSS please help me to get rid of this issue.
You can see the following image for final results.
http://i51.tinypic.com/5bwpee.jpg
so i code like that
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
</div>
</div>
</div> <!-- #header -->
and CSS is .. actually in the following codes i use gradient image of and use pattern image to overflow the background.
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
so please kindly help me to solve this problem that how i set logo and author details in center of header..
i tried position but maybe it goes wrong.
Now i edited my code the results below, but still having problem
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
</div>
</div>
CSS
#wrapper {
position:relative;
}
#header {
width:100%;
height:150px;
background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;
}
#pattern {
width:100%;
height:150px;
background:url(http://i51.tinypic.com/ao75eg.jpg) repeat;
position:absolute;
top:0px;
}
#main {
width:1200px;
margin:0 auto;
margin-top:-103px;
}
#main img {
z-index:5px;
}
after doing all this still having problem that the #pattern over all the layers. so please kindly help me to solve this issue.
Thank you all.
Create a div for your logo and sitename content.
Move the div towards the right with position:relative; left: 400px or whatever distance you need.
Float the logo and sitename to have them line up side by side.
Set the container div (#logoandsitename) to overflow:auto; to contain the floats.
HTML
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
<div id="logoandsitename">
<img src="img.source" />
<span id="sitename">Your Site Name</span>
</div>
</div>
</div>
</div> <!-- #header -->
CSS
#logoandsitename {
overflow: auto;
width: 300px;
height: 100px;
position: relative;
left: 300px;
}
#logoandsitename img {
float:left;
}
#sitename {
float:left;
font-size: 40px;
}
That pretty much what you are looking for?
Why you need "width:1200px;" in #wrapper?
Why not you try this html?
<div id="header">
<div id="wrapper">
<div class="topHeader">
<div id="logo">Logo</div>
<div id="author">Author Details</div>
</div>
</div>
<div class="pattern"></div> <!-- .pattern -->
</div> <!-- #header -->
and this css:
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
#logo, #author{
width:200px;
height:50px;
float:left;
}
#author{
margin-left:20px;
}
.topHeader{
width:500px;
margin:0 auto;
}