I have four tabs developed with HTML5/CSS3/JS shown below.
I have used display:inline-block; for tab divs and text-align:center for their parent div to locate all four tabs at the center of the page.
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3:
.parent{text-align:center;}
.tabItem{display:inline-block;}
Now I want to locate two of the tabs i.e. YOU and HELP at the right-side of the page, and the rest of the tabs i.e. DATABASE and TASKS at the center of the page. I wonder how I can do that.
It's preferred to have div elements follow the natural flow of the page.
Do something like this
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right{float:right;}
.left{float:left;}
<div class='parent'>
<div class='tabItem left'>Content for Left</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem right'>YOU</div>
<div class='tabItem right'>HELP</div>
</div>
here is your solution!
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right {
float: right;
}
<div class='parent center'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='parent right'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>HELP</div>
</div>
</div>
Hope this helps!!
<html>
<head>
<style>
.parent{text-align:center;}
.tabItem{display:inline-block;}
#right {float: right;}
</style>
</head>
<body>
<div class='parent'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div id="right" class='tabItem'>YOU</div>
<div id="right" class='tabItem'>HELP</div>
</div>
</body>
</html>
Or just put those two divs in a parent container and give it an id="right" to avoid repeating id !!
I think you will need to set the tabs you need to relocate to absolute position, so they will be out of the normal content flow, then you can truly center the other two tabs.
.parent {
background: pink;
text-align: center;
position: relative;
}
.tabItem {
margin: 0 5px;
display: inline-block;
background: aqua;
}
.tabItem:nth-child(1) {
position: absolute;
right: 50px; /* width of "HELP" tab */
}
.tabItem:nth-child(4) {
position: absolute;
right: 0;
}
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3 feature display:flex is an option too. Can play around with it to see if it would work.
.parent{
display:flex;
justify-content:center;
}
.item{
padding: 10px;
text-transform:uppercase;
}
.right{
margin-left:auto;
}
.left{
margin-right:auto;
}
<div class="parent">
<div class="item left">you</div>
<div class="item">database</div>
<div class="item">tasks</div>
<div class="item right">help</div>
</div>
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>
I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>
Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}
Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>
Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag
You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>
i have problem with align divs inside main centered div.
Here is my code
<style>
body {
max-width: 1150px;
min-width: 900px;
margin:0 auto; }
.container {
text-align:center;
background-color:#e1e1e1; }
.box {
width: 250px; }
.inline-block {
color: #eee;
margin: 10px 0px 0px 10px;
text-align: center;
display:inline-block; }
.one {
height: 22px;
background: #744; }
</style>
<div class="container">
<div class="inline-block"><div class="one box">1</div>
</div>
<div class="inline-block"><div class="one box">2</div>
</div>
<div class="inline-block"><div class="one box">3</div>
</div>
<div class="inline-block"><div class="one box">4</div>
</div>
<div class="inline-block"><div class="one box">5</div>
</div>
<div class="inline-block"><div class="one box">6</div>
</div>
<div class="inline-block"><div class="one box">7</div>
</div>
<div class="inline-block"><div class="one box">8</div>
</div>
</div>
Result when i resize window
What i need
P.S. Sorry for my English, i hope you understand this.
Here is the DEMO
Just it's simple add Float:left to it
I think .container { text-align:left;} will do the trick for you, of course then you'll need .container > div { text-align:center;}. And I would also suggest to add classes to those divs so you don't have to use the immediate child selector.
I want a normal div for the body of my text and a bunch of little divs that are exactly 150px by 150px. How might i do this?
This is a fairly trivial effect to accomplish. One way to achieve this is to simply place floated div elements within a common parent container, and set their width and height. In order to clear the floated elements, we set the overflow property of the parent.
<div class="container">
<div class="cube">do</div>
<div class="cube">ray</div>
<div class="cube">me</div>
<div class="cube">fa</div>
<div class="cube">so</div>
<div class="cube">la</div>
<div class="cube">te</div>
<div class="cube">do</div>
</div>
The CSS resembles the strategy outlined in the first paragraph above:
.container {
width: 450px;
overflow: auto;
}
.cube {
float: left;
width: 150px;
height: 150px;
}
You can see the end result here: http://jsfiddle.net/Qjum2/2/
Browsers that support pseudo elements provide an alternative way to clear:
.container::after {
content: "";
clear: both;
display: block;
}
You can see the results here: http://jsfiddle.net/Qjum2/3/
I hope this helps.
You can also hard code in the dimensions in your html code as opposed to putting the desired dimensions in a style sheet
<div id="mainDiv">
<div id="mydiv" style="height:150px; width:150px;">
</div>
</div>
As reply to Jonathan Sampson, this is the best way to do it, without a clearing div:
.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }
<div class="container">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
.myDiv { height: 150px; width 150px; }
<div class="mainDiv">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</div>
<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>
css:
.smallDiv { height: 150px; width: 150px; }
You can set the height and width of your divs with css.
<style type="text/css">
.box {
height: 150px;
width: 150px;
}
</style>
Is this what you're looking for?