Photoshop Question posted in
The official user guide can be found here.

Div inside another div with transparent padding – Photoshop

I am struggling with the following situation. It is hard for me to describe it the right way, so I have created an example in Photoshop to illustrate the situation.

Please visit the following link: http://websitedelivery.nl/files/example.png

Some explanation: I am working on a website which uses images as the website’s background. Now I need to create two content areas, a large one and a smaller one that will only be shown at the top right, both containing text. The thing is that the text from the large content block needs to continue during the whole content block (partially at the top and the full width at the bottom).

Anyone got a clue how to achieve this with just HTML and CSS?

Thanks in advance!

Edit: I see many of you use a border around the top right block, but unfortunately that won’t do it. It needs to show the background-image of the page. I have updated my image so that you can see what I mean: http://websitedelivery.nl/files/example1.png

Tags:

4

Answers


  1. 0

    You could make a div, and make the little block inside it float to the right. The content in the parent will wrap around it.

    HTML:

    <div id="content">
    <div id="smallbox">smallbox with content</div>
    <p>... content ...</p>
</div>

    CSS:

    #content {
    border-radius: 10px;
    background: white;
    width: 600px;
    margin: 20px;
}
#smallbox {
    width: 200px;
    height: 75px;
    background: lightblue;
    float: right;
}

    DEMO

    Adjust it to your needs.

    [EDIT]
    Improved version, with also rounded border in the small box: clickerdecklick.

    Login or Signup to reply.
  2. 0

    Here’s one approach:

    JSFiddle: http://jsfiddle.net/S6tSL/

    Basic structure:

    <section class="content">
    <aside>
        <div class="inner-border">Top right text...</div>
    </aside>
    The rest of the text...
</section>

    CSS:

    .content {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
}
.content aside {
    margin: -30px -30px 20px 20px;
    border-radius: 5px;
    background-color: #aaa;
    float: right;
    padding: 10px;
}
.content aside .inner-border {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    width: 200px;
}

    Hopefully that should get you started.

    Login or Signup to reply.
  3. 0

    While editing the fiddle, many other answers have been appeared,
    but I will also share my own :),

    while others have also good answers,
    hope this help

    http://jsfiddle.net/hY9w3/3/

    Just for reference:

    body {
    background: url(http://hdpicstock.com/wp-content/uploads/2013/09/Beautiful-Nature-Wood-Images-HD-Wallpaper.jpg) no-repeat;
    font-family:Verdana;
    font-size:10px;
    overflow:hidden;
}

.clear{
    clear:both;
}

.wrapper {
    width:400px;
    margin: 15px auto; /* center the wrapper*/
}

.content-top-left{
    width: 70%;
    float: left;
    min-height: 66px;
    padding:10px;
    background:#fff;
    border-top-left-radius:5px;
}

.content-top-right{
    width: 30%;
    float: right;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;


}

.content-top-right-inner{
    background-color:#fff;
    padding:10px;
    border-bottom-left-radius:5px;
    border-top-right-radius:5px;
    min-height:20px;
}


.content-bottom{
    background-color: #fff;
    padding:10px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.content-top-left, .content-bottom, .content-top-right{
    box-sizing: border-box;
}

 <div class="wrapper">

    <div class="content-top-left">
       Top left 
    </div>

    <div class="content-top-right">
        <div class="content-top-right-inner">
        Carentem sunt tuti tuba, Habitandae
        </div>
    </div>
    <div class="clear"></div>

    <div class="content-bottom">
        bottom content
    </div>

</div>
    Login or Signup to reply.
  4. 0

    on the basis of posted image I’ve made a Demo. You many CHECK the DEMO FIRST.

    CSS Code is here

    body {background:gold;}

.container{ 
background:#ffffff; 
broder-radius:5px; 
height:auto;  
overflow:hidden;
}

.container p{ padding:4px;}

.info{
float:right; 
background:#ffffff;  
border-radius: 8px;
padding:5px;
height:120px;
border:10px solid gold;
border-bottom-left-radius:10px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top:0;
border-right:0;
}

    HTML Code is like this

    <div class="container">
<div class="info">smallbox with content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate placerat augue, non dictum dolor semper in. Morbi vitae magna scelerisque, cursus dolor ac, tincidunt diam. Nulla iaculis turpis non consectetur vestibulum. Maecenas in magna ligula. Curabitur ornare auctor aliquam. Vestibulum mattis, felis bibendum molestie euismod, lacus orci ornare sapien, eget suscipit urna massa eu nunc. Mauris nulla tellus, aliquam eu ornare in, euismod quis enim. Cras vel aliquet neque. Suspendisse accumsan ante at molestie rutrum. Aliquam aliquet lacus nec nisi dignissim posuere.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search