I have 2 <p> tags. How can I let the 2nd <p> tag overflow but not overlap the 1st <p> tag.
Below is an example of what I a want to do
<p>Heading</p> - <p>Text text text text text text text text
text text</p>
On the contrary to SteffPoint. You should never use html tables for the structure of your web page. What I would suggest you to do is to place both your paragraphs each in its own div so they have their own block and then float them left next to each other. For this, the most important thing is the width of the block. Make sure the width of the div is small enough so that when you float, the bottom div slides up. I usually use the "%" sign so it adapts to the size of the window.
/* CSS */
/* This border is simply to see the block you have around each paragraph */
.Block {
border: 1px solid black;
padding: 2px;
margin: 2px;
width: 40%;
}
.adjacentBlock {
float: left;
}
<html>
<head>
<link rel="stylesheet" href="help.css">
</head>
<body>
<div class="Block adjacentBlock">
<p>This is your first paragraph inside the div</p>
</div>
<div class="Block adjacentBlock">
<p>This is your second paragraph inside the div</p>
</div>
</body>
</html>
Related
I am a beginner in HTML/CSS. I am trying to write a paragraph on side of image. But when paragraph reaches end of container it goes to next line but does not respect the indentation.
What I want to achieve is:
IMG Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
What Happens now:
IMG Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Please refer to image below:
Any Help would be appreciated
Let's say we are taking a container to make them side by side. In markup there are few ways to do such thing. Let's take a container div.
<div class='container'>
</div>
inside of this container we are gonna have our image and paragraph.
<div class='container'>
<div>
<img src='' alt='img'/>
</div>
<div>
<p>Your paragraph here</p>
</div>
</div>
to have them side by side let's add some css:
<style>
.container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
</style>
Explaination :
When we used display:grid; it will be in side by side and take same width as other one takes. And grid-template-columns will make them aligned. Hope you understand
If you’re trapped in a page wrap - say all the contents of the page are in a div whose width is 900px, then you want one div WITHIN that that’s the full page width. What’s the easiest way to do this?
I know you can end the 900px div, do the full width div, and then start another 900px div, but is there a way to style the inner div so you don't have to escape it? 100vw works for making it the right size but doesn't position it in the right spot.
So simplistic example:
<div style="width:900px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
Thanks!
You can use negative left margin (-50vw + half parent width).
body {margin: 0;}
#a {background: red;}
#b {background: green; margin-left: calc(-50vw + 200px)
<div id="a" style="width:400px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;" id="b">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
For this code example I've added IDs (for cleaner CSS styles) and change parent div to 400px (because there is smaller window).
I don't recommend trying to make a child div "escape" its parent because going with that approach will require pointlessly complicated CSS. You can accomplish what you want with a container div and a couple nested children which is a much simpler solution:
.narrow {
width: 300px;
margin: 0 auto;
background-color: tomato;
padding: 16px;
}
.full {
background-color: gold;
padding: 16px;
}
<div>
<div class="narrow">
<p>text text text</p>
</div>
<div class="full">
<p>more text or image or whatever</p>
</div>
<div class="narrow">
<p>text text text</p>
</div>
</div>
I would argue that the way you are trying to solve the issue is not very helpful for an actual website. Normally, you would have a container, your top div, which contains its lower elements. Making a child element go outside its parent div like you seem to want goes against that mentality.
Of course, sometimes you may want to put an element outside its parent, and you can use pavel's answer. For example, maybe you want to animate a line moving. You would then offset that element by -100% and then change that offset to give it the impression of movement. But that would be a special case.
To solve your problem, I would use the following structure:
Here is a link to the example too.
<div class='container'>
<div class='thin'>
<p>text text</p>
</div>
<div class='full-width'>
<p>I want this section to be the full page width and centered</p>
</div>
<div class='thin'>
<p>text text</p>
</div>
</div>
.container{
text-align:center;
padding: 0 5vw; //padding of 5vw to the left and right
}
.thin{
width:80vw;
margin: 0 auto;
background-color:yellow;
}
.full-width{
background-color:green;
}
I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>
My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?
Here is example code
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src=" ">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Here is CSS
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.
I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.
First the errors in the code; You are missing an end quoation mark for the class attribute boxForImage, and the style rule .boxForImage ends with { instead of }.
The floating elements in the boxForNews div won't affect the height of their parent. You can make it contain its children by changing the overflow style:
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
.boxForNews {
overflow: hidden;
background: #eee;
}
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src="http://placehold.it/100x100">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
I'm developing a bootstrap style website and I have text that needs centering. I've centered it in the horizontal dimension by using center align but I dont know how to center it vertically in the row.
<div class="col-md-6">
<p align="center">Some Text that needs centering.</p>
</div>
The 'align="center"' takes care of the horizontal alignment but I dont know how to put the text in the absolute center of the row.
With bootstrap you have text alignment helper classes:
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
http://getbootstrap.com/css/#type-emphasis
(you need to scroll down a little)
you can also set an element to display: block and center via margin.
<div class="center-block">...</div>
paragraph tags should automatically be block level elements
Hope this will work.
<div class="col-md-6">
<p style="display:inline-block; vertical-align:middle">Some Text that needs centering.</p>
</div>
Here's an example that should help it retains the bootstrap class. You can also view it in this demo.
HTML
<div class="cont .col-md-6">
<h1>Some text</h1>
</div>
CSS
.cont {
border: 1px solid #333;
width: 400px;
background: #eee;
}