I'm having a problem with borders in between two divs and so I've tried a couple of different pieces of code to see if it gives me what I need; for example, I tried using a new <div > in between the divs I want the vertical border to be in, but I don't think I'm inputting the information correctly. I understand that you have to also add code to your CSS sheet but wwhat should it look like exactly? What's the proper way?
Taking this piece of code into consideration: How would I go by adding a vertical line in between the #content and the #sidebar? You could say that its a vertical line that separates both elements if it had text.
<div id="container">
<div id="header">
header content here
</div>
<div id="content">
main content here
</div>
<div id="sidebar">
sidebar content here
</div>
<div id="footer">
footer content here
</div>
</div>
=============CSS============
#container {
width: 960px;
margin: 20px auto;
}
#header {
}
#content {
float: left;
width: 620px;
}
#sidebar {
float: left;
width: 340px;
}
footer {
clear: both;
}
Here's an image as to how this code would look in text. Example with text of code given above
So basically, I'm trying to figure out how to add a border in between the left paragraph and the right paragraph.
I hope its understandable and my question is clear enough.
Thanks,
You can use border-left-style: solid; in your #sidebar or using border-right-style: solid; in your #content
I have an idea but I'm not sure how well it will work. Put 'first name' input down to the 'Access now' button as one div and define a border-left css property like so:
`.mydiv{
border-left: thick double #777;
}`
Related
I've created this JSFiddle to illustrate how I want the inline-blocks to line up.
<div class="entry">
<div class="title">Hello</div>
<div class="divider"> </div>
<div class="content">This is some content that goes down to the next level when it should actually stay in the same place, just create a new line right below where it was supposed to start.</div>
</div>
.entry {
margin-bottom: 40px;
div {
display: inline-block;
}
.divider {
width: 0;
border-left:1px black solid;
}
}
In the third example of the JSFiddle, when the text overflows, it creates a new line the whole way to the left of the parent div, when I expected it to start right below itself.
What am I missing here?
Update
After trying some of the suggested methods, I came up with this JSFiddle which does address the content box problem, but, the .title now changes it's width and won't keep the assigned widht. How do I fix that problem?
do you want something like this?
just edit your css
see: https://jsfiddle.net/fmwd3x7m/9
... and you have to open and close yours keys correctly
.entry {
margin-bottom: 40px;
}
div {
display: flex;
}
.divider {
width: 0;
border-left:1px black solid;
}
Did you consider using flex display ?
display: flex;
that is because your ".entry div" display is set to "inline-block" in the css section. set it to it to "inline" and it will behave as you expect
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
<div class="cat-left">
</div>
<div class="cat-right">
</div>
.cat-left {
float: left;
width: 233px;
border: 1px solid #c5c5c5;
}
.cat-right {
margin-left: 12px;
float: left;
}
I write this for make two box (one in left and one in right). now I want to make another
<div class="cat-left"></div>
if i put my cat-left after my cat-left then it's shown in right of first cat-left. You have seen that I have used border. Is their any option for me to make it in bottom on existing cat-left.
check http://s7.postimage.org/3t6rfpdih/demo.png for figure out what exactly I want my code.
I have tried by giving position absolute to second cat-left but not sure how it's help me without setting margin in pixel.
You need to include two sub-divs in your cat-left box like so:
<div class="cat-left">
<div class="cat-left-inner">
Left top
</div>
<div class="cat-left-inner">
Left bottom
</div>
</div>
<div class="cat-right">
Right
</div>
where
.cat-left-inner {
height: 10em;
}
You need to provide set heights to your divs to make them fill out their containers in the desired way. See this fiddle for a more concrete example: http://jsfiddle.net/A6axj/2/.
I used to have tables before to display the content and people here advised me to remove tables and use CSS floating for better styling.
I am new to everything. My Problem is I have content and side bar. I want it to be displayed like
content | Sidebar
But Now with the current styling I have It is displaying like
content
|
Sidebar
Can you please correct me.
<style type="text/css">
.csscontent
{
margin-right: 500px;
}
.csssidebar
{
float: right;
width: 500px;
background: darkgreen;
/* height:500px; */
}
</style>
If I add
<div class="Content">
all the content
<div class="sidebar">
<Image>
</div>
If I add sidebar inside the content the image is getting displayed below the content leaving right-margin of 500px.
If I add sidebar outside of the content the image is getting displayed below the content.
<div class="Content">
all the content
</div>
<div class="sidebar">
<Image>
</div>
I want both content and side bar to be displayed side by side
In the HTML file you first need to set the floating elements, followed by the none floating ones. Because the floating element is going to block the entire "level" of the website and the floating elements are placed below.
So your html should look like this:
<div class="sidebar">
<Image>
</div>
<div class="Content">
all the content
</div>
Other then that it looks good.
Float both to the left so they stack up against each other.
.Content
{
margin-right: 500px;
float: left;
}
.sidebar
{
float: left;
width: 500px;
background: darkgreen;
}
Add float to .csscontent class like
.csscontent
{
margin-right: 500px;
Float:left;
}
.content, .sidebar {
float: left;
}
Floating both divs left like the above will display both inline.
You can then apply specific styling to each class. Assigning a width to .content will then determine where .sidebar appears...
Or if all you want is to float the sidebar to the right, without floating the content, you should put the sidebar above the content in the HTML.
Of course, you still need to correct the class names...
you can add a wrapper for both elements.
<div id="wrapper">
<div id="content">
all the content
</div>
<div id="sidebar">
<img/>
</div>
</div>
div#wrapper {
position:relative;
overflow:hidden;
width:800px;
}
div#content {
float:left;
width:600px;
}
div#sidebar {
float:right;
width:200px;
}
see fiddle for code and demo
fiddle: http://jsfiddle.net/g42x2/1/
demo: http://jsfiddle.net/g42x2/1/embedded/result/
SS:
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.