Yellow bar is width:100% header
I would like to achieve MAIN TEXT to be always CENTERED no matter the side text's length.
Margins between text are 100px
Image:
Thanks in advance
EDIT : HTML and CSS so far:
HTML:
<html>
<head>
</head>
<body>
<center>
<div id="top"></div>
Text Logo
<span id="mainText"> Menu Links </span>
Username: <?php echo $uname; ?>
</center>
</body>
</html>
CSS:
#mainText {
margin-right:100px;
margin-left:100px;
}
If i understand may be that's you want.
CSS
.left{
float:left;
background:yellow;
}
.right{
float:right;
background:green;
}
.middle{
display:inline-block;
*display:inline/*For IE7*/
*zoom:1;
vertical-align:top;
background:red;
margin:0 100px;
}
.parent{
text-align:center;
}
.parent div{
text-align:left;
}
HTML
<div class="parent">
<p class="left">L side Text</p>
<p class="middle">Center side Text</p>
<p class="right">R side Text</p>
</div>
Check this http://jsfiddle.net/XhMtK/3/
UPDATED
May that's you want
Check this http://jsfiddle.net/XhMtK/4/
Hi you can used float as like this
CSS
.one{
width:90%;
margin:0 auto;
overflow:hidden;
background:green;
text-align:center;
}
.left{
float:left;
background:yellow;
width:20%;
}
.center{
margin:0 auto;
background:pink;
width:50%;
}
.right{
float:right;
background:red;
width:20%;
}
HTML
<div class="one">
<div class="left">Left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Live demo http://jsfiddle.net/rohitazad/JNxsZ/2/
Related
I'm trying to get a really basic layout using only CSS and divs. What I would like to do is have 3 big divs on the same row and a small div below the first div of the first div in the row. Since I'm trying to set for all of them an height of 400px except for the first one and the small one - which have an heigh of 300px and 100px - I would expect them to show all on the same "line", making a big block. What I get instead is the following:
This is my CSS:
body {
background-color:white;
}
header {
background-color:black;
color:red;
height:10%;
width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
width:10%;
float:left;
overflow:hidden;
}
article {
height:100px;
clear:left;
width:10%;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
width:50%;
float:left;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
float:left;
width:40%;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
clear:both;
}
aside img
{
max-width:100%;
max-height:100%;
margin:0 auto;
display:block;
}
And this is my HTML:
<body>
<header>
<h1 align="center"> Welcome to the official website of Almost Free Furniture</h1>
</header>
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
<aside id="aside">
</aside>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
I'm guessing the problem is in the fact that I want the yellow div to float next to two floating divs, and that may be impossible. Any tips on how to solve this?
I would fix this by wrapping the nav and article elements in a separate element:
.left-column {
width: 10%;
float:left;
}
nav {
background-color:#eee;
text-align:center;
height:300px;
width:100%;
overflow:hidden;
}
article {
height:100px;
width:100%;
background-color:blue;
overflow:hidden;
}
The markup would then become like this:
<div class="left-column">
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
Why not put a parent around your three elemtns and give it display: inline-block;?
Here is a Codepen for an example of a way to solve your problem: LINK TO CODEPEN
Here is some code too if you prefer to look here:
HTML
Welcome to the official website of Almost Free Furniture
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<aside id="aside">ANOTHER</aside>
</div>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
CSS
header {
background-color:black;
color:red;
height:10%; width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
overflow:hidden;
}
article {
height:100px;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
}
aside img {
max-width:100%; max-height:100%;
margin:0 auto;
display:block;
}
.inline-div { display: inline-block; width: 33%; }
I try to position a table-cell always at the bottom within a display:table,
but with no success.
Maybe someone can show me what is wrong with my CSS.
codepen
HTML
<div class="table">
<div class="cell">
<div class="top">Top</div>
<div class="middle">Text in the<br>middle cell<br>with a variable <br>number of rows</div>
<div class="bottom">Button always at the bottom</div>
</div>
<div class="cell">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Button always at the bottom</div>
</div>
</div>
CSS
.table {
background-color:#BBB;
border-collapse:separate;
border-spacing:10px;
display:table;
width:500px;
}
.cell {
background-color:#EEE;
display:table-cell;
padding:5px;
width:200px;
}
.top {
height:20px;
}
.middle {
min-height:60px;
padding:15px;
}
.bottom {
min-height:30px;
vertical-align:bottom;
}
If you can afford to give your .bottom a fixed height, potentially you could absolutely position them to within the container and then give .middle some matching margin or padding?
All you have to do is to add position:relative; to "cell" class, and position:absolute; bottom:5px; to "bottom" class. The button will be absolute positioned in your "cell" div, which is relative positioned to the browser.
https://codepen.io/DannaB67/pen/NvxELm?editors=1100
HTML
<div class="table">
<div class="cell">
<div class="top">Top</div>
<div class="middle">
Text in the<br>middle cell<br>with a variable <br>number of rows</div>
<div class="bottom">Button always at the bottom</div>
</div>
<div class="cell">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Button always at the bottom</div>
</div>
</div>
CSS
.table {
background-color:#BBB;
border-collapse:separate;
border-spacing:10px;
display:table;
width:500px;
}
.cell {
background-color:#EEE;
display:table-cell;
position:relative;
padding:5px;
width:200px;
}
.top {
height:20px;
}
.middle {
min-height:100px;
padding:15px;
}
.bottom {
min-height:30px;
position:absolute;
bottom:0px;
right:5px;
}
HTML
<div id="container">
<div id="first">Some text in the first div</div>
<div id="second"><input type="text" value="Some text in the input" /></div>
</div>
</div>
CSS
#first{
width:100px;
background:red;
float:left;
}
#second{
background:blue;
}
#container{
overflow:hidden;
}
#container:after{
clear:both;
content:"";
height:0px;
width:0px;
visibility: hidden;
}
Fiddle: http://jsfiddle.net/6GBts/2/
You might want this
#second{
background:blue;
overflow:hidden
}
input{
width:100%
}
Js Fiddle Demo
I'm trying to get the pictures to get ".other-wrap" to vertically align with the picture on the left. I've tried adding a margin or a border but for some reason this pushes ".other-wrap" down and further out of alignment. Can anyone explain what's causing this behavior and what css I can add to ".other-wrap" to get it to align without changing the html structure.
fiddle
Html:
<div id="588970897807405-list" class="main">
<div id="588970897807405" class="main-wrap">
<div class="inner-wrap">
<div class="inner-name-wrap" style="font-size: 10pt;">
<div class="inner-name">header</div>
</div>
<div class="inner-img-wrap">
<img id="588970897807405-event-img" class="inner-img" src="http://nodogaboutit.files.wordpress.com/2012/10/j04310181.jpg">
</div>
<div class="formatted-footer-wrap" style="font-size: 10pt;">
<div class="footer">footer</div>
</div>
</div>
<div class="other-wrap">
<div class="other-inner">
<div class="other-img-wrap"><img class="other-img" width="120" height="120" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"></div>
</div>
</div>
</div>
CSS:
.main .inner-img{
vertical-align:middle;
margin:auto;
display:block;
width:120px;
height:120px;
top:0px;
}
.other-wrap{
/*border:solid black 15px;*/
margin:15px;
}
.main .inner-name-wrap{
white-space:nowrap;
width:150px;
font-size:14px;
text-overflow:ellipsis;
font-weight:normal;
display:block;
color:white;
background:black;
}
.main .formatted-footer-wrap{
color:white;
display:block;
font-size:10px;
width:150px;
background:black;
}
.main .other-wrap{
display:inline-block;
font-size:12px;
}
.main .formatted-time-wrap{
display:none;
font-size:10px;
}
.inner-wrap{
display:inline-block;
border:solid hsl(0, 100%, 100%) 1px;
}
It seems you need vertical-align.
Try vertical-align: middle:
.main-wrap{
font-size: 0; /* To fix extra space due to whitespaces in HTML */
}
.other-wrap, .inner-wrap{
display:inline-block;
vertical-align: middle;
margin: 15px;
}
Demo
<style>
body{
color:red;
}
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Fotter Content</div>
</div>
You forgot to clear your floats.
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Fotter Content</div>
<br style="clear: both;" /> <!-- Google "clear floats" for a few different ways to clear your floats. -->
</div>
This is his problem, and this is his solution.
P.S. It's spelled footer :)