I have 2 nested divs as
<div id="header">
<div id="logo"></div>
<div id="header_r"></div>
</div>
The css is
#header{
border: 1px solid;
width: 900px;
border-radius: 10px;
min-height: 100px;
}
#logo{
border: 1px solid;
width: 400px;
border-radius: 10px;
min-height: 80px;
float: left;
}
#header_r{
border: 1px solid;
width: 500px;
border-radius: 10px;
min-height: 80px;
float: left;
}
It gets arranged one below the other. How do I get them side by side?
Close the tag on the header-r div
You need to close the tag on the "header_r" div
<div id="header">
<div id="logo"></div>
<div id="header_r"></div>
</div>
Reduce width for logo and header_r by 2px each because border is also included in width of an element.
Related
<div>
<div style="float: left; border: 1px solid green;">Left Text</div>
<div style="text-align: center; border: 1px solid red;">Center Text</div>
</div>
Note: The first div always should be in left. The second div should be in center of the page.
If you want to align horizontally the two inner divs into the parent one, don't use float.
Try to add
display: inline-block;
width: 45%; /* example */
And then text-align: center on the parent.
Although I am not sure I understand your question completely, I think this is what you are looking for:
.container {
width: 100%;
}
.left {
float: left;
width: 25%;
z-index: 2;
border: 1px solid green;
position: absolute;
top: 8px;
left: 8px;
}
.center {
float: left;
width: 100%;
border: 1px solid red;
text-align: center;
}
<div>
<div class="container">
<div class="left">Left Text</div>
<div class="center">Center Text</div>
</div>
</div>
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
I need to align two div's inside a parent div.
The parent div should take up the page width with a margin on both sides.
The 1st child div should be 100px wide with a 4px margin. The 2nd Child div has to take up the rest of the space with a 4px margin on the right.
How do I write the CSS for this? I have written this so far
div.parent {
width: ?;
border:1px black solid;
position: relative;
clear: both;
}
<div class="parent">
<div class="child1"> </div>
<div class="child2"> </div>
Why not just add the margin to the parent div?
<div style="height: 100px; width: 100%; padding: 4px; background-color: Yellow;">
<div style="height: 100%; width: 100px; background-color: Lime; position: relative; float: left; border: solid 1px black; border-right-width: 0px;"></div>
<div style="height: 100%; width: 100%; background-color: Red; border: solid 1px black; border-left-width: 0px;"></div>
</div>
I'm trying out a css challenge where the requirements state that:
Draw 2 squares of width 50px side by side
Each square should have a circle in the center with width of 10px
The distance between two squares should be 10px
I can't seem to make my circle appear.. Here's my fiddle - https://jsfiddle.net/xmozvs5p/
Here's a snippet of my css:
.square {
width:50px;
height:50px;
border:1px solid black;
display:inline-block;
margin:10px;
}
.circle{
background-color:green;
border-radius: 50%;
width:10px;
display:block;
margin:auto;
}
Add a height to the .circle element and it can be centered using flexbox on the parent.
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10px 5px; /* 10px between elements */
}
.circle {
background-color: green;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
margin: auto;
}
<div class="square">
<div class="circle"></div>
</div>
<div class="square">
<div class="circle"></div>
</div>
You can also try this way with less of code:
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
background:radial-gradient(circle at center,green 5px,transparent 6px);
margin: 10px 5px;
}
<div class="square">
</div>
<div class="square">
</div>