I would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?
Related
This is my html and css:
I want display 3 div on 1 line:
i set height of div = 300px
at div 2 i set height:1500px, but it auto expand div and not display scroll:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.mainContent {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.col {
display: table-cell;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
</head>
<body>
<div class="mainContent">
<div class="col">
part 1
</div>
<div class="col">
part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
</body>
</html>
Why can't display scroll of div?
I think the issue is you're using table layout. If you set your column divs to display:block, and float:left; then you'll get the ability to scroll back.
<style>
.mainContent {
display: block;
width: 100%; /*Optional*/
}
.col {
display: block;
float:left;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
Try using Flex layout.
.mainContent {
display: flex;
flex-direction: row;
border-spacing: 10px; /*Optional*/
}
.col {
min-width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
<div class="mainContent">
<div class="col">part 1</div>
<div class="col">part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
So I have a red bar inside a container which lies between two black boxes. The boxes are fixed in size while the red bar and the container are based on percentages.
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
How can this be achieved?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
JSFiddle
CSS3 has a new flex display style supported by the major browsers.
.container {
display: webkit-flex;
display: flex;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
}
.bar {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
To set the box elements to a specific width use min-width rather than width
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even IE9.
.bar {
width: calc(100% - 60px);
}
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: calc(100% - 60px);
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
Try "table" layout
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
width: 80%;
height: 40px;
background: grey;
display: table;
}
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
vertical-align: top;
}
.box {
height: 50%;
margin: 0 7px;
border: 15px solid black;
border-top: none;
border-bottom: solid 1px black;
/*float: left;*/
}
.bar {
width: 80%;
height: 100%;
background: red;
/*float: left*/
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="box"></div>
</div>
<div class="bar"></div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}
I'm hoping there's a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers). I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine. When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do. The problem is that the second element still has the 50px left margin, so the elements don't appear centered. I could add JavaScript to detect when the container height changes (i.e. the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?
Here's my code, simplified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/YRshx/
Based on bastianonm's solution, try this:
<div id="wrapper" style="text-align: center; margin:0 -25px;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
http://jsfiddle.net/YRshx/6/
Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.
Fidlle: http://jsfiddle.net/xKVG3/
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper {
border:2px solid black;
animation: 4s linear 0s infinite alternate wide;
}
#keyframes wide {
from { width: 490px; }
to { width: 430px; }
}
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
You could do something similar to:
#media screen and (max-width: 453px){
#elem2 { margin-left:0 !important; }
}
http://jsfiddle.net/YRshx/3/
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
Working jsFiddle Demo
Try to add margin to both left and right, and to your both elements:
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>
However based on your real layout, this trick maybe won't work, or need more things.
Just keep the inline container in a inline div and float them...
Code:-
<div id="wrapper" style="text-align: center;">
<div id="outer" style="display: inline-block;">
<div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</div>
Demo:- http://jsfiddle.net/YRshx/2/
Thanks...
If you have more elements inside one container and wrap them evenly use below code it will work perfect.
I am using UL, LI and minimal css
https://jsfiddle.net/mkpasala/ayw8szcn/
<h1>Wrap children evenly</h1>
<ul class="skillscont-list">
<li>TestSkill</li>
<li>TestSkill1</li>
<li>TestSkill2</li>
<li>Test - Skill</li>
<li>Chat-Skill</li>
<li>testing disposition</li>
<li>Narender</li>
<li>Inya</li>
<li>Chat_Inya</li>
<li>Agent1</li>
<li>agenttwo</li>
<li>mahender</li>
<li>naresh</li>
<li>venkat-skill</li>
<li>English</li>
<li>French</li>
<li>testpoc</li>
<li>mahender1</li>
<li>devskill</li>
<li>praveen</li>
</ul>
.skillscont-list{
margin: 0px;
padding: 0px;
overflow: overlay;
list-style-type:none;
}
.skillscont-list li{
border:1px solid black;
float: left;
widht: auto;
padding: 5px 10px;
margin: 5px;
color:white;
font-weight:bold;
background-color:gray;
}
So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form.
I want the boxes to be next to each other, with about an inch of separation between them.
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
http://jsfiddle.net/kkobold/qMQL5/
#header {
width: 100%;
background-color: red;
height: 30px;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#first {
width: 100px;
float: left;
height: 300px;
background-color: blue;
}
#second {
width: 200px;
float: left;
height: 300px;
background-color: green;
}
#clear {
clear: both;
}
<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>
This will work
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
<div style="display: inline">
<div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
<div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>
I am just giving the code for two responsive divs side by side
*{
margin: 0;
padding: 0;
}
#parent {
display: flex;
justify-content: space-around;
}
#left {
border: 1px solid lightgray;
background-color: red;
width: 40%;
}
#right {
border: 1px solid lightgray;
background-color: green;
width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<div id="left">
lorem ipsum dolor sit emet
</div>
<div id="right">
lorem ipsum dolor sit emet
</div>
</div>
</body>
</html>
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
HTML
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="menu">Email/Password</div>
</header>
<div class="first-box">
<p>Video Explaning Site</p>
</div>
<div class="second-box">
<p>Sign up Info</p>
</div>
<footer>
<div>Website Info</div>
</footer>
</div>
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}
You can do it in three ways:
Float Method
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
Flexbox Method
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
CSS Grid Method
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
Source
Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.asp might be a good resource.
Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):
<style>
.wrapper {
width: 980px;
}
</style>
<body>
<div class="wrapper">
//everything else
</div>
</body>
As far as the content boxes go, I would suggest trying to use
<style>
.boxes {
display: inline-block;
width: 360px;
height: 360px;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.