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;}
Related
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.
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 have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to achieve the layout as shown in the picture. Where multiple smaller divs (A,C,D) are float left and top of each other while bigger Divs (B,D) are float right and top of each o ther
Can someone please suggest how to achieve this.
What about this Demo ?
HTML
<div class='wrapper'>
<div class='left'>
<div></div>
<div></div>
<div></div>
</div>
<div class='right'>
<div class='div1'></div>
<div class='div2'></div>
</div>
</div>
CSS
.wrapper{
width:460px;
}
.left{
width:150px;
height:300px;
border:1px solid red;
float:left;
text-align:center;
}
.left > div {
display:inline-block;
width:100px;
height:90px;
background:brown
}
.right{
float:right;
width:300px;
height:300px;
border:1px solid orange;
text-align:center
}
.div1{
display:inline-block;
width:250px;
height:200px;
background:black
}
.div2{
display:inline-block;
width:250px;
height:80px;
background:yellow
}
This should get you on your way. Its quite the same as image/text wrapping. Just copy and paste it then modify how you would like it. :)
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.bigDiv{
float: right;
width: 70%;
border: 1px solid red;
height: 300px;
}
.smallDiv{
width: 30%;
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<div class="bigDiv"></div>
<div class="smallDiv"></div>
<div class="smallDiv"></div>
<div class="smallDiv"></div>
<div class="bigDiv"></div>
</body>
</html>
You can do this with HTML and CSS.
I made this jsFiddle for you with a setup for your layout.
Hope this is what you are looking for.
Demo
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;
}